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