如何使用AJAX将数据POST到php文件

How to POST data to php file using AJAX

本文关键字:php 文件 POST 数据 何使用 AJAX      更新时间:2023-09-26

我在将数据发送到要处理的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);
                    }
                 }
      });