使用Ajax，PHP和jQuery提交表单

Question

我正在使用一个带有弹出窗口的网页，该弹出窗口提示用户输入他/她的电子邮件地址。 提交后，应将数据上载到数据库。

但是，电子邮件地址未上传到数据库，我不确定为什么。 肯定会建立数据库连接，并且不会产生任何错误消息。

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

内部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>

内部insert.php：

$username = "root";
$password = "root";
$hostname = "localhost";
$database = "emails";

$dbhandle = mysql_connect($hostname, $username, $password)
 or die("0");
echo "Connected to MySQL <br>";

$selected = mysql_select_db("emails", $dbhandle)
 or die("0");
echo "connected to db <br>"; 

$youremail = $mysqli->real_escape_string($_POST["emailaddress"]); 
echo "$youremail";
mysql_query("INSERT INTO email_table (emailAddress) VALUES ('$youremail')");
echo json_encode($youremail);

AJAX脚本（放置在索引页正文的末尾）：

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);
           }
       });
   });
 }

在网页上的输出：

Connected to MySQL 
connected to db 

任何帮助表示赞赏。

Answer 1

您的脚本部分有误。 您尚未正确关闭功能。 应该更像这样

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);
          }
        });
    });
}

这就是为什么您得到错误

语法错误：意外的令牌'}'。 期望'）'结束参数列表。

Answer 2

首先，您可以将ajax函数放在<script></script>标记之间的文件末尾。 其次，编辑您的函数并使用serialize()方法提交jquery形式的表单。 在您的表单中添加一个ID，例如

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

并像这样编辑功能

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

同样不要忘了用real_escape_string清理$_POST变量值

Answer 3

添加此内部代码（如下所示）脚本标签<script> </ script>

$("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);
        });
    });

使用ev.preventDefault（）阻止表单默认提交
删除formdata并使用$（'form'）。serialize（） ，它将序列化您的表单输入。

Answer 4

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

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

然后这可能起作用，但这有点奇怪。 您有一个按钮单击处理程序，该按钮在按钮的窗体上创建了一个提交处理程序。 这有可能为表单创建多个提交处理程序（每次单击按钮一个），这可能会带来不良影响。 实际上，该按钮通常只会被单击一次，因此您可能会发现一些错误，这些错误不会立即显示出来，并且很难重现。

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

 $(init); // document ready event binding function init() { // document ready handler function $("#email_submit").submit(ajaxSubmit); // form submit event binding } function ajaxSubmit(ev) { // form submit handler function ev.preventDefault(); $.ajax({ type: 'POST', url: "insert.php", data: { formData: $(this).serialize() }, datatype: 'html', success: function(data) { alert(data); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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"> </form>