Как получить данные POST в php-файл с помощью AJAX

Question

У меня возникли проблемы с отправкой данных в обрабатываемый файл php. Я пробовал практически все, но не могу найти источник проблемы. Ниже приведен php-файл, который отправляет имя продукта, цену и идентификатор функции 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; 

?> 

Я новый пользователь для веб-программирования, поэтому любая помощь или советы будут оценены. Я рассматриваю это часами и не могу заставить его работать.

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-скрипта. Если при нажатии кнопки вы не можете увидеть какой-либо запрос в консоли, попробуйте использовать «метод» вместо «type». Некоторые старые версии jquery не поддерживают тип. method: "POST",

Answer 4

Я проверил ваш код и он работал, то Ajax запрос происходит нормально, попробуйте удалить эту одну строку из вашего яваскрипта кода. window.location.assign ("http://localhost:8888/checkout.php");

Я использую эту версию JQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js

В сети вкладке Google инспектор я получаю это:

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

Response: 
Bike150