如何使用 AJAX 将数据发布到 php 文件 [重复]

Posted 2023-03-27

【中文标题】如何使用 AJAX 将数据发布到 php 文件 [重复]

【英文标题】：How to POST data to php file using AJAX [duplicate]

【发布时间】：2016-08-14 00:35:10

【问题描述】：

我无法将数据发送到要处理的 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();
    ?>

接下来是checkoutfunction：

<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 数据库。我的网址不正确吗？我试过使用"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;

 ?> 

我是网络编程的新手，所以任何帮助或提示将不胜感激。我已经看了好几个小时了，似乎无法让它工作。

【问题讨论】：

您不应该期望通过直接调用操作 url 看到任何回声。您正在发送 Ajax，它会返回响应。

@MateHegedus 更好的方法是使用直接将数据发送到 php 文件的表单，而不是先将其发送到函数然后使用 AJAX？

@NMoeini 我知道，但是当我在ajax返回后调用`window.location.assign("http://localhost:8888/checkout.php")`时，不应该回显数据吗？

不。因为它在第二次调用中什么也不发送。第二次调用时请求为空。

@NMoeini 所以代码应该可以工作，我只是没看到？如何验证我的数据是否已发布？

【参考方案1】：

使用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 );
);

【讨论】：

此解决方案有效。由于我的无知，我没有意识到它仍然会更新数据库，感谢您指出这一点！

【参考方案2】：

您可以在浏览器控制台中跟踪 ajax 请求。它将向您显示请求和响应以及您从 php 脚本收到的错误。 如果单击按钮时您无法在控制台中看到任何请求，请尝试使用“方法”而不是“类型”。一些较旧的 jquery 版本不支持类型。 method: "POST",

【参考方案3】：

我测试了您的代码并且它工作正常，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

在 Google Inspector 的网络标签中，我得到了这个：

Request:
Request URL:http://localhost:8888/checkout.php
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8888

Response:
Bike150

【参考方案4】：

您应该对您的代码进行以下更改

$.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);
                    
                 
      );

【讨论】：

如果不起作用请告诉我

我收到一个状态错误：0。这没有任何意义，我没有连接。

这意味着您的网址不正确.....这个文件是否真的存在于您的文件中localhost:8888/checkout.php

如果你愿意，它可以在我的测试示例中工作，我可以为你上传

您好，先生，如果数据没有发布，只需删除 contentType:"application/json "...删除该行