使用XMLHttpRequest获取预约数据后DIV功能失效问题咨询

根因说明 #

你观察到的元素标识大小写转换确实是触发两个异常的核心原因，同时还伴随有输出代码转义错误、DOM结构重复的问题，具体对应关系如下：

• 日历按钮失效原因：
  JavaScript是严格区分大小写的，原始代码中日历点击事件的参数为document.forms['ApptCRUD'].txtApptDate、日期格式为MM/dd/yyyy，但后端返回的代码里全部被转为小写，变成document.forms["apptcrud"].txtapptdate和mm/dd/yyyy，和实际表单ID、输入框ID、日历控件要求的格式参数不匹配；同时返回的onclick属性存在引号嵌套错误，代码直接语法报错无法执行，自然无法唤起日历控件。
• 提交仍为旧数据原因：
  1. 你返回的代码外层额外包裹了一层<div id="ApptEntry">，替换原始DOM后页面内出现两个相同ID的ApptEntry节点，表单提交时读取的是第一个未被更新的旧节点内的输入框值，所以拿到的始终是旧数据
  2. 部分输入框（比如确认号输入框）原始代码有设置ID，返回的代码中缺失对应ID，读取逻辑如果是按ID取元素也会拿到旧节点的值

修复方案 #

1. 调整后端GetAppt.php的输出逻辑：
   • 关闭自动转换HTML标签、属性、内嵌JS代码大小写的逻辑
   • 修正内嵌事件的引号嵌套：HTML属性用双引号包裹，属性内JS代码的字符串用单引号包裹，避免转义冲突
   • 输出内容仅返回原ApptEntry节点的内部内容，不要额外包裹外层的ApptEntrydiv，避免重复ID
2. 动态替换DOM后按需重新初始化第三方控件：如果你的日历控件是页面首次加载时全局初始化的，替换HTML后重新调用一次日历控件的初始化方法，确保新插入的节点被正确绑定
3. 优化表单提交逻辑：不要提前缓存表单元素的引用，每次提交时实时从当前DOM中读取输入框的值，避免读取到已被替换的旧节点数据

内容的提问来源于stack exchange，提问作者HelloWorld101