使用AJAX提交数据

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

我没有收到任何错误，并且在控制台中看不到任何奇怪的东西。

HTML

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

$('#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"; 
    }

来源

2012-06-30 Paul Dessert

你连接吗？或任何错误？ –

是的，连接在PHP文件中，我只是没有在这里包括它 –

Html和Js似乎很好。查询是否在非AJAX PHP文件中执行？ – Cranio

你的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放在正确的路径。

来源

2012-06-30 09:46:51

嗨穆罕默德，对不起，延迟。感谢您设置jsfiddle。我再次检查了我的代码，如果我将'$（'testButton'）'更改为'$（'html'）'我可以执行脚本。所以，这告诉我'$（'testButton'）'选择器有问题，但是我找不到任何错误。任何想法？ –

我正在使用最新版本的jquery使用' ' –

@Paul。试试这个：$（'＃testButton'）。live（'click'，function（）{.....这是一个演示。[http://jsfiddle.net/TPu8X/4/](http:// jsfiddle.net/TPu8X/4/） –

正如你已经mentionned，输入需要一个 “name” 属性。所以HTML现在好了。

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

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

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

您还可以使用“网络”和谷歌Chrome的督察的“控制台”选项卡以更好地理解正在发生的事情与你的Ajax请求。

“网络”会显示HTTP请求及其响应（如果有）。也试图插入您的JS一些

console.log('message')

看一看在控制台上进行调试。

来源

2012-06-30 01:58:55

尝试在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元素中，添加“返回false”在它触发避免这个函数结束时提交。

来源

2012-06-30 02:37:31 WhyNotHugo

jqXHR.success（）回调将在jQuery 1.8中被弃用，所以最好使用新的回调jqXHR.done（）。 –

我不知道这一点，谢谢。 – WhyNotHugo

使用AJAX提交数据

回答

相关问题