Javascript 如何在不刷新页面的情况下发送表单数据？_Javascript_Jquery_Ajax

Javascript 如何在不刷新页面的情况下发送表单数据？

javascript jquery ajax

Javascript 如何在不刷新页面的情况下发送表单数据？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我已经使用提交按钮在ajax中发送数据，而没有任何页面刷新。但是页面刷新了请检查我的代码并告诉我问题所在 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("#idForm").submit(function() { alert("hi"); var url = "ajax.php"; $.a

我已经使用提交按钮在ajax中发送数据，而没有任何页面刷新。但是页面刷新了

请检查我的代码并告诉我问题所在

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#idForm").submit(function() { alert("hi");

    var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
</script>
<form id="idForm" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

使用

$("#idForm").submit(function(e) { 
e.preventDefault();//use it here to stop default behaviour
   alert("hi"); 
   var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});

我认为您可以使用“preventDefault”功能来实现这一点：

<script>
$("#idForm").submit(function(e) { alert("hi");
    e.preventDefault();
    var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
</script>


$（“#idForm”）.submit（函数（e）{alert（“hi”）；
e、 预防默认值（）；
var url=“ajax.php”；
$.ajax({
类型：“POST”，
url:url，
数据：$（“#idForm”）.serialize（），
成功：功能（数据）{
警报（数据）；
}
});
返回false；
});

js已经阻止表单提交问题中的代码已阻止此行提交表单：

return false;

这意味着：问题中的JavaScript代码根本没有运行

表格还不存在这里的问题是，当这行代码运行时：

$("#idForm")...

该元素还不在dom中。因此，提交处理程序没有附加到任何东西上——当表单提交时，它只是一个标准的HTTP post请求

要解决问题中的问题，请执行以下操作之一

在尝试操作元素之前，请确保该元素存在如果脚本在元素出现在源代码中后运行-表单确实存在：

。。。
$（“#idForm”）。。。

将jquery代码放入文档就绪处理程序中如果js位于就绪处理程序中：

<script>
    $(function() {
        $("#idForm")...
    });
</script>
<form id="idForm">...


$（函数（）{
$（“#idForm”）。。。
});
...

脚本标记在哪里并不重要，因为dom在运行时已经完成加载

将所有js放在页面末尾如果javascript系统性地放在页面末尾：

<body>
    <form id="idForm">...
    ...
    <script src="//ajax.googleapis.c...
    <script>
        $("#idForm")...
    </script>
</body>


...
...
我有表格，表格中有表格，我通过服务器上的formData发送

$（“#提交”）。在（“单击”，函数（）{
log（“这是表单表数据，由服务器上的formData发送”）
var emptab=document.getElementById（“选项卡体”）
var tabrows=emptab.getElementsByTagName（“tr”）
var tabinfo={}；
var formdata=new formdata（）
for（设tr=0；tr});jQuery ajax和XHR是非常古老的学派，如果不将contentType和processData设置为false，jQuery就无法处理未知对象
使用fetchapi会更容易
也让html标记像往常一样定义方法和操作。不要让javascript定义行为。然后，您的函数可以在更多的地方使用，使任何形式都成为ajaxify，并且更加通用。另外，如果关闭JS，您的站点将在没有JS的情况下工作。Javascript应该是一种增强

$（'idForm'）。在（'submit'，异步函数（事件）{
//禁用默认表单提交
event.preventDefault（）
//获取所有表单数据
var formData=新的formData（此）
var res=等待获取（this.action{
方法：这个方法，
正文：formData
})
var json=await res.json（）
});

您的脚本无法运行。单击“提交”按钮后，页面已刷新页面将转到refresh@Developer：我已在$（document）.ready（function（）{}）中找到解决方案放置代码；功能就是这样。。
<form id="idForm">...
<script>
    $("#idForm")...
</script>

<script>
    $(function() {
        $("#idForm")...
    });
</script>
<form id="idForm">...

<body>
    <form id="idForm">...
    ...
    <script src="//ajax.googleapis.c...
    <script>
        $("#idForm")...
    </script>
</body>