Question

我正在开发一个网页，其中包含一个弹出窗口，提示用户输入他/她的电子邮件地址。然后，数据应在提交时上传到数据库。

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

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

在index.php里面：

while true do
    getTarg()
    derp1()
    sleep(2.9)
    monInit()
end

在insert.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>

AJAX脚本（放置在索引页面主体的末尾）：

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

网页上的输出：

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

这就是你收到错误的原因

SyntaxError：意外的令牌＆＃39;}＆＃39;。期待＆＃39;）＆＃39;结束争论列表。

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

另外，请勿忘记使用$_POST

清理real_escape_string变量值

Answer 3

添加此内部代码（如下所示）脚本标记＆lt; script＆gt;＆lt; / script＆gt;



$("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 并使用 $（＆＃39; form＆＃39;）。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>

使用Ajax，PHP和jQuery提交表单

4 个答案: