Question

我正在学习AJAX和jQuery，我正在尝试整理一个简单的测试脚本，该脚本需要2个input字段并将数据插入到我的数据库中。我无法弄清楚我做错了什么，但下面的代码不会插入数据。谁能发现我的问题？

我没有收到任何错误，我在控制台中看不到任何奇怪的内容。

HTML

<input id="name" type="text"/>
<input id="LastName" type="text"/>
<button id="testButton">Button</button>
<div id="callback"></div>

JS

$('#testButton').click(function () {
    var firstName = $("#name").val();
    var lastName = $("#LastName").val();

    $.ajax({
      type: "POST",
      url: "insert.php",
      data: { name: firstName, LastName: lastName }
    }).done(function( msg ) {
      alert( "Data Saved: " + msg );
});
});

PHP

    //Adding to the local database
    $name = array($_POST['name'], $_POST['LastName']);

    $qry = $dbh->prepare(
        'INSERT INTO info (FirstName, LastName) VALUES (?,?)');

    if ($qry->execute($name)) {
        echo "Success";
    }

Answer 1

正如您已经提到的，输入需要“名称”属性。所以HTML现在还可以。

如果你的PHP工作正常，那么你应该看看你的JS。

我认为此代码未执行。 http://api.jquery.com/ready/尝试将JS代码封装在此代码中：

$(function() {
    // Your code here
});

您还可以使用Google Chrome检查员的“网络”和“控制台”标签，以便更好地了解您的ajax请求发生的情况。

“网络”将显示HTTP请求及其响应（如果有）。还尝试插入一些

console.log('message')

在你的JS中

并查看控制台以进行调试。

Answer 2

尝试在ajax调用中使用success函数。

$('#testButton').click(function () {
    var firstName = $("#name").val();
    var lastName = $("#LastName").val();

    $.ajax({
      type: "POST",
      url: "insert.php",
      data: { name: firstName, LastName: lastName }
      success: function(data) {
        alert("sucess" + data);
      }
    });
});

此外，如果按钮在form元素内部单击后仍然可能仍然在执行提交，添加＆＃34;返回false＆＃34;在函数结束时，它会触发以避免这种情况。

Answer 3

您的JS代码工作正常，但使用jsfiddle echo服务。

$('#testButton').click(function () {
    var firstName = $("#name").val();
    var lastName = $("#LastName").val();

    $.ajax({
      type: "POST",
      url: "/echo/html/",
      data: { name: firstName, LastName: lastName }
    }).done(function( msg ) {
      alert( "Data Saved: " + msg );
});
});

这是链接：http://jsfiddle.net/TPu8X/ 另一个版本：http://jsfiddle.net/TPu8X/1/

您的代码仅适用于jquery 1.5.2或更高版本（可能您使用的是旧版本）

看来你没有insert.php正确的路径。所以尝试将php置于正确的路径上。

使用AJAX提交数据

3 个答案: