我正在学习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')
并查看控制台进行调试。