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

У меня возникли проблемы с отправкой данных в обрабатываемый файл 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; ?> 

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

При использовании 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 ); }); 

Вы можете отслеживать запрос 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

На вкладке «Сеть» 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 

вы должны иметь следующие изменения в своем коде

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