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

Question

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

我使用甲基苯丙胺的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; 

?> 

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

Answer 1

使用Ajax时，请求由ajax发送，您可以在成功方法中看到响应。对动作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); 
}); 

Answer 2

你应该有你的代码以下更改

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

Answer 3

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

Answer 4

我测试了你的代码，它工作，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