1

I'm learning AJAX and jQuery and I'm trying to put together a simple test script that will take 2 input fields and insert the data to my database. I can't figure out what I'm doing wrong, but the code below won't insert the data. can anyone spot my problem?

I'm not getting any errors and I don't see anything weird in the console.

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";
    }
4

3 回答 3

1

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

$('#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”以避免这种情况。

于 2012-06-30T02:37:31.310 回答
1

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

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

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

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

您还可以使用 Google Chrome 检查器的“网络”和“控制台”选项卡来更好地了解您的 ajax 请求发生了什么。

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

console.log('message')

在您的 JS 中查看控制台进行调试。

于 2012-06-30T01:58:55.443 回答
1

您的 JS 代码运行良好，但使用 jsfiddle 回显服务。

$('#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 放置在正确的路径上。

于 2012-06-30T09:46:51.663 回答