Javascript AJAX响应表单（vanilla JS）上的AJAX默认值（）

一路上，我回顾了几个很棒的问题，很多问题让我在一天内以40票的成绩赢得了我的徽章。但是，几乎所有的问题都使用像jQuery这样的非常规依赖项，或者没有满足我的特定需求。以下是两个精彩但令我感到遗憾的问题：

• （jQuery）

• （jQuery及其dup的朝圣之旅）

我很惊讶这个问题没有被问到，因为我不认为自己是如此富有想象力。如果这个问题已经存在，我想打开一个关于如何更新该问题的元讨论，以便搜索可以找到它

情况： 这是香草JS，没有依赖项

脚本使用

preventDefault（）

来中断由

id

标识的

form

-

submit

按钮，并调用AJAX。AJAX可以正常工作并正确更改内容。然后，问题开始了

这个AJAX用一个替换的

div

来响应，该div包含与

preventDefault（）中断相同的
form
。但是，在AJAX响应JS使用相同的
id更改包含
表单的
div
后，AJAX无法识别更新的
表单
-
提交
按钮

工作流程：
HTML->
（成功）
->AJAX（成功，第一次AJAX调用）
AJAX->
（成功，第一个AJAX响应）
->AJAX（坏掉的，第二个AJAX调用）
它只在第一次起作用；我需要它无限地工作。
注意，我需要处理这个特定的
表单
。AJAX更改的
div
中可能包含其他元素，包括可能的其他形式

守则：
index.php：

（阿贾克斯改编自）


addEventListener（“加载”，函数（）{
函数sendData（）{
const AJAX=new XMLHttpRequest（）；//AJAX处理程序
const FD=new FormData（form）；//绑定以将数据发送到form元素
addEventListener（“加载”），函数（事件）{
document.getElementById（“ajax_更改”）.innerHTML=event.target.responseText；
}）；//成功响应时更改HTML
addEventListener（“错误”，函数（事件）{
document.getElementById（“ajax_更改”）.innerHTML='Oops！出了点问题'；
} );
open（“POST”，“AJAX\u responder.php”）；//发送数据，AJAX\u responder.php可以是任何文件或URL
send（FD）；//发送的数据来自表单
}//sendData（）函数
const form=document.getElementById（“ajaxForm”）；//Access，id=“ajaxForm”可以是任何内容
addEventListener（“提交”，函数（事件）{//Takeover
event.preventDefault（）；
sendData（）；
} );
} );
用AJAX替换我


ajax\u responder.php：

if（$\u服务器['REQUEST\u METHOD']='POST'）{
$foo=$_POST['foo']；
$bar=$_POST['bar']；
回声'
“.$foo”


“.$bar。”


';
}

问题
让AJAX对
表单
-
提交
元素中包含的相同响应继续执行操作的“正确”方法是什么？
我已经考虑过不以相同的
形式响应的方式
：


让AJAX只响应和更改特定的小元素
将
表单
重新定位到AJAX更改内容之外

但这两者似乎都很复杂

在AJAX更新了
表单
-
提交
按钮后，必须有某种方法告诉AJAX在该按钮上执行
preventDefault（）
。我只是不知道那是什么样子

或者，还有其他解决方案仍然涉及Vanilla JS吗？
您正在将eventListener绑定到
ajaxForm
。然后替换它（=从DOM中删除
，并向DOM中添加新的
）。在这种情况下，eventListener也将被删除

要在新表单上拥有eventListener，您可以：

•仅更换
的内容。在这种情况下，不会删除DOM元素，因此eventListener保持不变
（不要忘记删除php响应中的
标记）。这是最简单的方法

document.getElementById("ajaxForm").innerHTML=
                             event.target.responseText;

•每次更改
时绑定一个新的eventListener：

AJAX.addEventListener( "load", function(event) {
        document.getElementById("ajax_changes").innerHTML =
                             event.target.responseText;
//=====> bind new eventListener here <======
      } );

•将eventListener绑定到容器一次

给定的解决方案是“每次
更改时绑定一个新的eventListener”

我更改了
const

const form=document.getElementById（“ajaxForm”）；

至
var

var form=document.getElementById（“ajaxForm”）；

然后将其与侦听器放在这一行中

/===>绑定新的eventListener此处您将eventListener绑定到表单
ajaxForm
。然后替换它（=删除并添加新），eventlistener也将消失。尝试仅替换表单内容或将eventlistener绑定到容器div。您可以签入de developer工具。在用ajax调用替换表单后，查看是否有附加到表单的事件。当您将其附加到
div
时，它会中断，因为随后您提交的是div，而不是表单。事件冒泡，因此它确实到达te div，您只需应用一些逻辑来提交表单而不是容器div。“将其绑定到容器div会中断[…]”-然后您到底更改了什么？如果您现在将
const form=document.getElementById（“ajaxForm”）
转换为
const form=document.getElementById（“ajax\u变更”）
，那么您当然需要相应地修改此部分，
const FD=new FormData（form）function addListenerToForm(){
    document.getElementById( "ajaxForm" ).addEventListener( "submit", function ( event ) {
       event.preventDefault();
       sendData();
    });
  }

document.getElementById( "ajax_changes" ).addEventListener( "submit", function ( event ) {
  event.preventDefault();
  sendData();
});

function sendData(){
   const AJAX = new XMLHttpRequest(); // AJAX handler
   const form = document.getElementById( "ajaxForm");               
   const FD = new FormData( form );
   ...
   }