Javascript 使用Ajax、PHP和jQuery提交表单

我正在制作一个网页，它有一个弹出窗口，提示用户输入他的/她的电子邮件地址。提交后，数据应上传至数据库

$("form").submit(function (ev) {
        ev.preventDefault(); //prevent form from default submit
        $.ajax({
            type: 'POST',
            url: "localhost:8888/insert.php",
            data: $('form').serialize()
        }).done(function (data) {
            console.log(data);
        });
    });

然而，电子邮件地址没有上传到数据库，我不知道为什么。数据库连接已明确建立，不会产生错误消息

我是使用AJAX/jQuery的真正初学者

Inside index.php：

<form form id="email_submit" action="insert.php" method="post" target="_top">

   <label>Email Address</label>
   <input type="text" name = "emailaddress" />
   <input type="submit" value="Add Email" onClick="send_data_to_server()">
</form>

网页上的输出：

Connected to MySQL 
connected to db 

非常感谢您的帮助。
首先，您可以将ajax函数放在文件末尾的
标记之间。
其次，编辑函数并使用
serialize（）
方法提交表单。在表单中添加一个id，如

<form id="email_submit" action="insert.php" method="post" target="_top">

另外，不要忘了用
real\u escape\u字符串对
$\u POST
变量值进行清理
添加此内部代码（如下所示）脚本标记



使用ev.preventDefault（）阻止表单默认提交

删除formdata并使用$（'form'）。serialize（），它将序列化表单输入。
您的脚本部分错误。您尚未正确关闭这些函数。应该是这样的

 $.ajax({
  type  : "POST",
  url   : "insert.php",
  data  : $("#email_submit").serialize(),
  datatype : 'html',
  success: function(data) {         
    alert(data);
  }
});

$("#email_submit").submit(function (ev) { ...

这就是为什么会出现错误

SyntaxError:意外标记“}”。应使用“）”结束参数
名单

jQuery选择器中缺少
#
。应该是：

这也许行得通，但有点奇怪。您有一个按钮的单击处理程序，它在按钮的窗体上创建提交处理程序。这可能会为表单创建多个提交处理程序（每个按钮单击一个），这可能会产生不良的副作用。实际上，这个按钮通常只会被点击一次，所以你可能会发现一些错误，它们不会马上出现，而且很难重现

相反，您应该在文档就绪处理程序中创建一次提交处理程序。您根本不需要单击处理程序，因为单击按钮只是提交表单的一种方式


$（init）；//文档就绪事件绑定
函数init（）{//文档就绪处理程序函数
$（“#email_submit”）.submit（ajaxSubmit）；//表单提交事件绑定
}
函数ajaxSubmit（ev）{//表单提交处理程序函数
ev.preventDefault（）；
$.ajax({
键入：“POST”，
url:“insert.php”，
数据：{formData:$（this）.serialize（）}，
数据类型：“html”，
成功：功能（数据）{
警报（数据）；
}
});
}

电子邮件地址
1）您的问题仅仅在于将Ajax功能放在哪里？2） 您是否尝试将其添加到页面末尾的脚本标记中？3） 您是否有任何错误？您是否在某处声明了
formData
？不知道将函数放在何处只是一个问题，我确实将它放在了页面末尾的脚本标记中。我没有声明formData，但已修改了代码（对不起，我曾经有过formData）请看一下这个问题：我仍然收到一条类型错误消息error:null不是对象（评估“$”（“email\u submit”）.submit'）我仍然收到一条类型错误消息error:null不是对象（评估“$”（“email\u submit”）.submit'）从表单中删除不需要的属性…只需添加此项，不需要表单id=“email submit”...  :)请看我的js小提琴完整的解释。别忘了添加jquery到你的html页面…我已经为你做了这件事。。。如果您满意，请不要忘记投票：）tnx我仍然收到一条类型错误消息error:null不是对象（评估“$”（“电子邮件提交”）.submit'）当我在当前代码中添加“$”时，我得到[error]TypeError:null不是对象（评估“$”（“#电子邮件提交”）.submit”）将数据发送到服务器（localhost，第640行）onclick（localhost，第172行）并在document ready处理程序中添加脚本，使站点直接进入表单接受（insert.php）。我不知道该告诉您什么。在我的代码片段中，只有单击按钮，提交处理程序才会执行，并且没有错误（除了关于ajax调用失败的问题之外，这是在这种环境中应该出现的）。你的意思是我应该将AJAX脚本正确地放在文件头中？？在文档中的什么位置包含脚本并不重要。AJAX代码应该在事件处理程序中执行-我建议使用表单提交处理程序。你应该将表单的提交处理程序绑定到文档就绪处理程序中。我已经编辑了一点答案，sepa对函数进行评级并添加注释，希望它澄清我的意思。它显示了事件处理程序和事件绑定之间的区别。


$("form").submit(function (ev) {
        ev.preventDefault(); //prevent form from default submit
        $.ajax({
            type: 'POST',
            url: "localhost:8888/insert.php",
            data: $('form').serialize()
        }).done(function (data) {
            console.log(data);
        });
    });

function send_data_to_server() {

    $("email_submit").submit(function (ev) {
        ev.preventDefault();
        $.ajax({
          type : 'POST',
          url : "insert.php",

          data  : { "formData" : $("#email_submit").serialize() },
          datatype : 'html',
          success: function(data) {
              alert(data);
          }
        });
    });
}

$("#email_submit").submit(function (ev) { ...