如何使用AJAX将数据POST到php文件
How to POST data to php file using AJAX
我在将数据发送到要处理的php文件时遇到问题。我几乎什么都试过了,但找不到问题的根源。下面是一个php文件,在用户单击购买按钮后,该文件将产品名称、价格和ID发送到checkout
函数。
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "Test";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT P1.Product_Name, S2.Price, P1.Product_ID FROM Product P1, Sale_Item S2 WHERE P1.Product_ID=S2.Product_ID AND P1.Category='Sports'";
$res = $conn->query($sql);
$counter=0;
while ($row = $res->fetch_assoc()){
$Product_Name = $row["Product_Name"];
$Price = $row["Price"];
$Product_ID = $row["Product_ID"];
echo ('<td><p></p>'.$row["Product_Name"].'<br>'.$row["Price"].'<p></p><input type="button" value="Buy" onclick="checkout(''' . $Product_Name . ''', ''' . $Price . ''', ''' . $Product_ID . ''')"</td>');
$counter++;
if ($counter==3) {
$counter=0;
print "<br>";
}
}
$conn->close();
?>
接下来是checkout
函数:
<script type="text/javascript">
function checkout(Product_Name, Price, Product_ID) {
//document.write(Product_Name, Price, Product_ID)
var theProduct_Name = Product_Name;
var thePrice = Price;
var theProduct_ID = Product_ID;
$.ajax({
type: "POST",
url: "http://localhost:8888/checkout.php",
data: {Product_Name: theProduct_Name, Price: thePrice, Product_ID: theProduct_ID},
});
window.location.assign("http://localhost:8888/checkout.php")
}
</script>
我使用的是MAMP的phpMyAdmin数据库。我的url不正确吗?我试过使用"http://localhost:8888/checkout.php"
,而只使用checkout.php
。下面是我需要处理数据的php文件。为了简单地学习如何发送数据,我只是在文件中回显,以确保它确实在发布。但没有任何回应。
<?php
session_start();
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "Test";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$theProduct_Name = $_POST['Product_Name'];
$theProduct_ID = $_POST['Product_ID'];
$thePrice = $_POST['Price'];
echo $theProduct_Name.$theProduct_ID.$thePrice;
?>
我是网络编程的新手,所以任何帮助或提示都将不胜感激。我已经看了几个小时了,似乎无法让它发挥作用。
使用Ajax时,请求由Ajax发送,您可以在success方法中看到响应。对操作URL的任何直接调用都将发送新的请求,在这种情况下,该请求对于线路是空的
window.location.assign("http://localhost:8888/checkout.php")
删除这行代码并更改jQuery.Ajax,如下所示,看看有什么响应。
var request = $.ajax({
type: "POST",
url: "http://localhost:8888/checkout.php",
data: {Product_Name: theProduct_Name, Price: thePrice, Product_ID: theProduct_ID},
dataType: "html"
});
request.done(function(msg) {
alert ( "Response: " + msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
您可以在浏览器控制台中跟踪ajax请求。它将显示您从php脚本中收到的请求和响应以及错误。如果点击按钮,您在控制台中看不到任何请求,请尝试使用"方法"而不是"类型"。一些较旧的jquery版本不支持类型。method: "POST",
我测试了您的代码,它工作正常,ajax请求正常发生,请尝试从javascript代码中删除这一行。window.location.assign("http://localhost:8888/checkout.php");
我使用这个版本的jQuery:https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js
在谷歌检查员的网络选项卡中,我得到了这个:
Request:
Request URL:http://localhost:8888/checkout.php
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8888
Response:
Bike150
您的代码应该有以下更改
$.ajax({
method: "POST",
url: "http://localhost:8888/checkout.php",
data: {"Product_Name": "theProduct_Name", "Price": "thePrice", "Product_ID": "theProduct_ID"},
success : function(responseText)
{
alert('success to reach backend');
// you can console the responseText and do what ever you want with responseText
console.log(responseText);
},
error : function(jqXHR, status, error){
if (jqXHR.status === 0) {
alert('Not connected.'nPlease verify your network connection.');
} else if (jqXHR.status == 404) {
alert ('The requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert ('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert ('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert ('Time out error.');
} else if (exception === 'abort') {
alert ('Ajax request aborted.');
} else {
alert ('Uncaught Error.'n' + jqXHR.responseText);
}
}
});
- 如何在php文件中获取$.post-ajax传递的值
- Javascript运行php文件,然后下载文件
- 通过Ajax将JavaScript函数传递给PHP文件
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 通过ajax到php文件获取单选按钮值
- 每天用javascript包含不同的php文件
- 如何使用javascript调用Php文件
- 如何使用php文件中的GET来获取我在.js文件中声明的变量
- 在CodeIgniter视图中将Javascript或jQuery代码作为PHP文件编写可以吗
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 包括php文件和几个js文件
- 将JavaScript变量传递到HTML输入框和(在PHP文件中使用)
- PHP文件没有't从Javascript应用程序获取$_POST
- 如何显示由ajax调用运行的PHP文件的echo
- 如何将php变量从php文件传递到js文件
- 如何使用javascript/jquery将变量从一个PHP文件传递到另一个PHP文件
- 在同一主机上对PHP文件使用XMLHTTP请求的Javascript违反了同源策略
- 通过Wordpress中的jquery调用运行php文件
- 通过Javascript调用php文件
- 如果($_SERVER[“REQUEST_METHOD”]=“POST”)条件在ajax调用不同的php文件进行验证和提