使用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

首先，您可以将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

Answer 2

来净化你的$_POST变量的值添加这里面的代码（秀下面）脚本标签<脚本> </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和使用$（ '形式'）。序列化（），它将系列化你的表单输入。

Answer 3

你的脚本部分是错误的。您没有正确关闭功能。它应该更喜欢这个

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

这就是为什么你在你的jQuery选择得到错误

SyntaxError: Unexpected token '}'. Expected ')' to end a argument list.

Answer 4

你缺少#。它应该是：

$("#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>