Question

我发生了三件事。

我使用以下HTML表单向jQuery发送信息。

        <div id="note_add_container">
            <form id="note_add" method="post">
                <input type="text" name="name" placeholder="name" />
                <input type="text" name="location" placeholder="location" />
                <button id="submit_note">Add note!</button>
            </form>
        </div>

这是我用来将这些序列化信息发布到数据库中的jQuery脚本。

   $('button').click(function () {  
        $.ajax ({
            type: "POST",
            url: "post.php",
            data: $('#note_add').serialize(), 
            success: function(){
                  alert("Done"); 
            }
        });    
    });

这是将信息插入数据库的PHP。

$name = $_POST['name'];
$location = $_POST['location'];

$sql = "INSERT INTO get (name, location)
VALUES ('$name', '$location')";
if (!mysqli_query($connection, $sql)) {
    die('Error: ' . mysqli_error($link));
}

这不起作用。我点击按钮，没有任何反应。警报不会触发。任何人都可以向我提出正确的方向，为什么我的代码不起作用？

Answer 1

这不起作用。我点击按钮，没有任何反应。警报不开火

您完全确定点击处理程序有效吗？你必须确保它首先工作，比如，

   $('button').click(function () {  
      alert('It works');
   });

如果有效，那么你可以继续前进。否则，请检查其内部DOMReady $(function(){ ... })和jquery.js是否已加载。

假设它有效，

您如何知道PHP脚本返回的内容？你只是假设它“应该工作”，在这里：

 success: function(){
  alert("Done"); 
 }

success()方法实际上包含一个变量，它是来自服务器端的响应。它应该被重写为，

 success: function(serverResponse){
  alert(serverResponse); 
 }

至于PHP脚本，

if (!mysqli_query($connection, $sql)) {
    die('Error: ' . mysqli_error($link));
}

您只能通过“回显”错误消息来处理失败。 mysqli_query()返回TRUE时，您无法处理这种情况。您应该发送1之类的内容，表示成功。

最后你的代码应该是这样的，

   $('#submit_note').click(function() {  
        $.ajax ({
            type: "POST",
            url: "post.php",
            data: $('#note_add').serialize(), 
            success: function(serverResponse) {
                  if (serverResponse == "1") {
                    alert('Added. Thank you');
                  } else {
                     // A response wasn't "1", then its an error
                     alert('Server returned an error ' + serverResponse);
                  }
            }
        });    
    });

PHP：

$sql = "INSERT INTO get (name, location)
VALUES ('$name', '$location')";

if (!mysqli_query($connection, $sql)) {
    die(mysqli_error($connection));
} else {
    die("1"); // That means success
}

/**
 * Was it $connection or $link?! Jeez, you were using both.
 * 
 */

Answer 2

您在$.ajax调用中指定的回调函数仅在从服务器收到响应时触发。由于在将数据插入数据库后，您从未从服务器向服务器发送任何内容，因此客户端永远不会调用alert("Done");。在PHP文件中添加一行，在成功插入SQL后向客户端发送响应。响应可以像显示{'status': 'success'}的JSON对象一样简单。

Answer 3

您应该采用更好的方式来处理表单。 serialize（）有所帮助，但最好将数据转换为JSON字符串。使用JSO时，您还需要在ajax调用中设置dataType。

$('#note_add').submit(function (event) {
    event.preventDefault();

    var formdata = $('#note_add').serializeArray();
    var formobject = {};

    $(formdata).each(function (event) {
        formobject[formdata[event].name] = formdata[event].value;
    });

    var data = {
        action: "formsend",
        json: JSON.stringify(formobject)
    };

    //* * send with ajax * *

    function sendajax(data) {
        var deferred = $.ajax({
            method: "post",
            url: "ajax.php",
            dataType: "json",
            data: data
        });
        return deferred.promise();
    }

    sendajax(formdata).done(function (response) {
        console.log(response);
        if (response.success == true) {
            alert("Done!");
        }
    })
});

抓住PHP

if(isset($_POST['action']) && $_POST['action'] == 'formsend') {

  $data = json_decode($_POST['json'];

// here you can now access the $data with the fieldnames

  $name = $data->name;
  $location = $data->location;

 // Write to the database
$sql = "INSERT INTO get (name, location) VALUES ('$name', '$location')";
if (!mysqli_query($connection, $sql)) {
    die('Error: '.mysqli_error($link));
}

if (mysqli_affected_rows($connection) > 0) {
    echo json_encode(array("success" = > true, "message" = > "data is submitted"));
} else {
    echo json_encode(array("success" = > false, "message" = > "an error occurred"));
}
}

Answer 4

将以下行添加到您的php文件中以发回响应：

HttpResponse::setCache(true);
HttpResponse::setContentType('text/html');       
HttpResponse::setData("<html>Success</html>");
HttpResponse::send();
flush();

按如下所示更改ajax调用以查看结果：

  $('#submit_note').click(function () {  
        $.ajax ({
            type: "POST",
            url: "post.php",
            data: $('#note_add').serialize(), 
            success: function(respData) {
                  console.log('Response:', respData)
                  alert("Done"); 
            }
        });    
  });

Answer 5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<title></title>
</head>
<body>
<div id="note_add_container">
  <form id="note_add" method="post">
    <input type="text" name="name" placeholder="name" />
    <input type="text" name="location" placeholder="location" />
    <button id="submit_note">Add note!</button>
  </form>
</div>
<div id="response"> </div>
</body>
<script type="text/javascript">
        $("#submit_note").click(function() {
            var url = "post.php"; // the script where you handle the form input.
            $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#note_add").serialize(), // serializes the form's elements.
                   success: function(data)
                   {
                       $('#response').empty();
                       $('#response').append(data); // show response from the php script.
                   }
                 });

        return false; // avoid to execute the actual submit of the form.
    });
   </script>
</html>

<强> post.php中

// Insert here your connection path

<?php
if((isset($_REQUEST['name']) && trim($_REQUEST['name']) !='') && (isset($_REQUEST['location']) && trim($_REQUEST['location'])!=''))
{           
    $name = addslashes(trim($_REQUEST['name']));
    $location = addslashes(trim($_REQUEST['location']));    

    $sql = "INSERT INTO get (name, location) VALUES ('".$name."', '".$location."')";
    if (!mysqli_query($connection, $sql)) {
    die('Error: ' . mysqli_error($link));
    }

    echo "1 record added";
}
?>

jQuery序列化数据未插入数据库

5 个答案: