使用 AJAX 提交数据


Submitting data with AJAX

我正在学习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";
    }

您的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 调用中使用 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 元素内,则单击该按钮后可能仍在执行提交,请在它触发的函数末尾添加"return false"以避免这种情况。

正如你已经提到的,输入需要一个"name"属性。所以HTML现在可以了。

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

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

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

您还可以使用Google Chrome检查器的"网络"和"控制台"选项卡,以更好地了解ajax请求的情况。

"网络"将显示HTTP请求及其响应(如果有)。也尝试插入一些

console.log('message')

并查看控制台进行调试。