AJAX 請求負載未顯示在控制台日志中

Question

我正在學習 AJAX，我試圖在成功和失敗的情況下在控制台中記錄所有數據參數以發出警報。 我的代碼有效，我可以成功轉儲我發送的數據，但控制台中沒有任何顯示，即使我明確地將 console.log 放在 Javascript 中以進行注冊。 這是我的代碼。 html頁面

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h2>Send JSON</h2>
  <form action="postrequest.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="param1"/>
  <input type="text" name="param2"/>
  <input type="text" name="param3"/>
  <button type="submit">Submit</button>
</form>


</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  $("document").ready(function(){
    $(".js-ajax-php-json").submit(function(){
     var param1 = $("#param1").val();
     var param2 = $("#param2").val();
     var param3 = $("#param3").val();
    $.ajax({
  url : 'postrequest.php',
  contentType: "application/json",
  dataType: "json",  
  type : 'POST',
  data: JSON.stringify({ 
    param1: param1,
    param2: param2,
    param3: param3
  }),
  success: function(data) {
            console.log(data);
        },
  error: function (data) {
    alert(data.param3);
  }       
       });
  });
});

</script>
</html>

請求后.php

<?php 

var_dump( $_POST);

我究竟做錯了什么？

Answer 1

錯誤 1：刪除表單標記。 它會起作用，因為它包含 action="postrequest.php"。 你同時做兩件事。

使用表單標簽通過 PHP 提交表單。
您正在執行 ajax 並提交表單。

錯誤 2：您正在編寫var param1 = $("#param1").val(); 你定義的 param1, param2, param3 在哪里？

錯誤 3：您提供的是 jquery 鏈接，您沒有關閉腳本標記。

錯誤 4：您在 ajax 中發送data並使用相同的變量再次輸出 ajax 響應

錯誤 5：您創建的 Ajax 錯誤塊是錯誤的。

 <!DOCTYPE html>
    <html>
    <body>
      <input type="text" name="param1" id="param1"/>
      <input type="text" name="param2" id="param2"/>
      <input type="text" name="param3" id="param3"/>
      <input type="button" value='Submit' class="js-ajax-php-json" />

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $(".js-ajax-php-json").click(function() {

                var param1 = $("#param1").val();
                var param2 = $("#param2").val();
                var param3 = $("#param3").val();
                $.ajax({
                    url: 'postrequest.php',
                    dataType: "html",
                    type: 'post',
                    data: {
                        param1: param1,
                        param2: param2,
                        param3: param3
                    },
                    success: function(rsp) {
                        console.log(rsp);
                    },
                    error: function(jqXHR, status, err) {
                        console.log("Error");
                    },
                });
            });
        });
      </script>
      </body>
    </html>

postrequest.php 頁面

<?php
  print_r($_POST);
?>

我剛剛用一個非常簡單的代碼重寫了你的代碼。 您可以根據您的要求更改它。

Answer 2

我認為根本原因是您點擊提交后頁面正在重新加載。 因此，您在控制台中看不到任何內容。 請嘗試以下步驟。

從表單標簽中刪除“action”和“method”屬性。 這已經在 ajax 請求中處理了。
添加 onsubmit="return false;" 屬性到表單標簽。 這將防止重新加載頁面。

AJAX 請求負載未顯示在控制台日志中

問題描述

2 個解決方案

解決方案1
2 2020-01-20 07:35:28

解決方案2
0 2020-01-19 22:09:55

AJAX 請求負載未顯示在控制台日志中

問題描述

2 個解決方案

解決方案1 2 2020-01-20 07:35:28

解決方案2 0 2020-01-19 22:09:55

解決方案1
2 2020-01-20 07:35:28

解決方案2
0 2020-01-19 22:09:55