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

Question

I have three things going on.

I am sending information to jQuery using the following HTML form.

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

This is the jQuery script that I am using to post such serialized information into the database.

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

This is the PHP that inserts the information into the database.

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

This does not work. I click the button and nothing happens. The alert does not fire. Can anyone lead me the right direction as to why my code is not working?

Answer 1

This does not work. I click the button and nothing happens. The alert does not fire

Are you totally sure that click handler works? You must ensure that it works firstly, like,

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

If it works, then you can move on. Otherwise check if its inside DOMReady $(function(){ ... }) and that jquery.js is loaded.

Assuming that it works,

How do you know what your PHP script returns? You simply assume that it "should work", here:

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

success() method actually holds a variable that is response that comes from the server side. It should be rewritten as,

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

As for PHP script,

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

You only handling failure by 'echoing' error messages. You do not handle a situation when mysqli_query() returns TRUE. You should send something like 1 that indicates success.

And finally your code should look like this,

   $('#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.
 * 
 */