如何使用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