我的ajax调用没有给出任何错误和响应

Question

Ajax调用没有响应给我一个空结果（PHP）代码可以正常工作，只有我与ajax有关的问题。 我已经检查了所有CDN是否正常

我的html代码：

<form method="post">
    <input type="hidden" name="product_id" id="product_id" value="<?= $id ?>" >
    <input type="hidden" name="user_id" id="user_id" value="<?= $_SESSION['id'] ?>">

    <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
    <input type="hidden" name="rating" id="rating">
    <input type="submit" name="c_submit" id="c_submit">
</form>
<ol id="comment"> </ol>

我的PHP代码：

<?php
    include "../../functions/dbs.php";

    if (isset($_POST["c_submit"])){
        $product_id = $_POST['product_id'];     $user_id = $_POST['user_id'];
        $comment = $_POST['comment'];           $rating = $_POST['rating'];

        $query = "INSERT INTO user_profile (product_id,user_id,comment,ratting) values ('$product_id','$user_id','$comment','$rating')";
        print_r($query);exit();
        $sql=mysqli_query($con->connect(),$query);
    ?>

    <li class="box">
        <?= '<span class="email">' . $product_id. '</span>' ?>
        <?= '<span class="comment">' . $comment . '</span>' ?>
    </li>
<?php } ?>

我的ajax代码：如果用户可以单击“提交”，则在ol＃comment中将闪烁我们在输入字段中拥有的所有结果。

$(function () {
    $("#c_submit").click(function() {
        var product_id = $("#product_id").val();    
        var user_id = $("#user_id").val();
        var comment = $("#comment").val();          
        var rating = $("#rating").val();

        var dataString = 'product_id =' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
        if (product_id == '' || user_id == '' || comment == '' || rating ==''){
            alert('Please Give Valid Details');
        }else {
            $.ajax({
                type: "POST",
                url : "include/comm.php",
                data : dataString,
                cache: false,
                success : function(html){
                    console.log(html);
                    $("ol#comment").append(html);
                    $("ol#comment li:last").fadeIn("slow");
                }
            });
        }
    });
});

忽视 ：

“快速的棕狐狸跳过了一只懒狗。当MTV斧头测验节目前，DJ蜂拥而至。垃圾MTV测验被狐狸幼崽所宠爱。鲍德斯慢跑，轻弹石英，VEX若虫。抢快节奏的华尔兹。砖测验“

Answer 1

我尝试了您的代码段，发现了几个问题：

1. 由于您使用，并且将事件侦听器附加到Submit按钮，并且不使用preventDefault（），因此单击按钮将使浏览器无需AJAX即可发送表单数据。 我建议您使用preventDefault（）阻止同步过程，而改用AJAX。
2. PHP代码依赖c_submit POST数据，而javascript提交的形成数据中不存在c_submit POST数据。 因此，PHP将完全忽略if（）块。 这就是为什么您看不到预期结果的原因。 我建议您要么更新if条件，要么仅使用其他变量。
3. 您的javascript代码中有一个错字，您在dataString变量中包含了多余的空格。
4. 我同意Alex的建议，将AJAX事件附加到表单提交事件，而不是附加到表单中的按钮。 毕竟是表格提交。

我的代码建议：

$(function () {
    $("form").on('submit', function(e) {
        e.preventDefault();
        ...
        var dataString = 'product_id=' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
        ...
    });
});

对于PHP对应对象，假设始终提交product_id数据，我建议：

if (isset($_POST["product_id"])){
    ....
}

Answer 2

您必须首先阻止click或Submit事件的默认行为。 您可以通过在事件处理程序的开头添加这一行来做到这一点。 另外，我从未见过使用jQuery对象的$符号调用匿名函数的方式。 我将假定此函数是整个应用程序的根目录或包装函数，并且将向您展示我的工作方式和人们的工作方式。

(function($) {
    $(document).ready(function() {

        $(document).on('submit', '#info_form', function(event) {
            event.preventDefault();
            // Add this line.

            var product_id = $("#product_id").val();
            var user_id = $("#user_id").val();
            var comment = $("#comment_input").val();
            var rating = $("#rating").val();

            var data = {
               product_id: product_id,
               user_id: user_id,
               comment: comment,
               rating: rating
            };

            if (product_id == '' || user_id == '' || comment == '' || rating == '') {
                alert('Please Give Valid Details');
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "include/common.php",
                    data: data,
                    cache: false,
                    success: function(html) {
                        console.log(html);
                        $("ol#comment").append(html);
                        $("ol#comment li:last").fadeIn("slow");
                    }

                });
            }
        });
    });

})(window.jQuery);

按照您监听submit事件的方式。 我认为，如果您现在开始更改HTML内容或操纵与表单本身相关的DOM，那么您现在的操作方式将引起一些问题。 我更喜欢使用$(document).on('submit', "#my-form-id", function(e){}); 这样，侦听器将被绑定到文档，而不是元素本身。 我不知道这是否是一种不好的做法，但过去它解决了我的很多问题。 另外，我倾向于将事件监听器代码包装在$(document).ready(function(){}); 该函数可以避免在DOM树完成加载之前执行代码，或者避免在我的应用中使用所需的库。

同样对于数据，因为您正在使用发布请求发送数据。 您必须以要在后端访问数据的方式来保留数据的结构。 在您的前端代码中，您正在使用字符串连接来连接参数，这是错误的。 jQuery中的AJAX函数获取数据并对其进行序列化。 因此，在您的情况下，您必须按照以下步骤操作：

 var product_id = $("#product_id").val();    
 var user_id = $("#user_id").val();
 var comment = $("#comment").val();
 var rating = $("#rating").val();

 var data = {
   product_id: product_id,
   user_id: user_id,
   comment: comment,
   rating: rating
 };

然后将其传递给ajax函数对象中的数据参数或字段。 您可以根据您的解决方案的例子在这里 ，和代码在这里 。

Answer 3

将您的ol ID更改为comment_answer或其他所需内容，因为您已经在input comment ID。

<ol id='comment_answer'></ol>

您需要防止表单提交的默认行为，现在，当您调用“提交”按钮时，应该刷新页面，但不应该这样做，因为只写return false; 在ajax调用之后，在ajax成功函数中将ol#comment更改为ol#comment_answer

$(function () {
    $("#c_submit").click(function() {
        var product_id = $("#product_id").val();
        var user_id = $("#user_id").val();
        var comment = $("#comment").val();
        var rating = $("#rating").val();

        var dataString = 'product_id =' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
        if (product_id == '' || user_id == '' || comment == '' || rating ==''){
            alert('Please Give Valid Details');
        }else {
            $.ajax({
                type: "POST",
                url : "include/comm.php",
                data : dataString,
                cache: false,
                success : function(html){
                    console.log(html);
                    $("ol#comment_answer").append(html);
                    $("ol#comment_answer li:last").fadeIn("slow");
                }

            });
        }
        return false;
    });
});

Answer 4

变化

1）整个页面上的ID不能相同。 a） <textarea name="comment" id="comment" ＆ <ol id="comment"></ol> 。 将其更改为<ol id="show_comment"></ol> 。

2）由于没有提供任何action ，因此也没有提供e.preventDefault(); ，它将采用当前网址。 为了防止它，添加e.preventDefault(); 在脚本中。

3）在include/comm.php文件中，第一个条件是检查if (isset($_POST["c_submit"])){ 。 在ajax脚本中没有传递c_submit属性。 因此，它不会使您陷入困境。 在ajax脚本中传递c_submit 。

4）在<?= '<span class="email">' . $email . '</span>' ?> <?= '<span class="email">' . $email . '</span>' ?> <?= '<span class="email">' . $email . '</span>' ?>此行。

未定义索引$email

定义$email位置将为否。 所以，检查一下。 我已将其替换为$user_id

形成

<form method="post">
   <input type="hidden" name="product_id" id="product_id" value="<?= $id ?>" >
   <input type="hidden" name="user_id" id="user_id" value="<?= $_SESSION['id'] ?>">
   <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
   <input type="hidden" name="rating" id="rating">
   <input type="submit" name="c_submit" id="c_submit">
</form>

<ol id="show_comment"></ol>

包括/comm.php

<?php
include "../../functions/dbs.php";
if (isset($_POST["c_submit"])){
  $product_id = $_POST['product_id'];
  $user_id = $_POST['user_id'];
  $comment = $_POST['comment'];
  $rating = $_POST['rating'];

  $query = "INSERT INTO user_profile (product_id,user_id,comment,ratting) values ('$product_id','$user_id','$comment','$rating')";
  $sql= mysqli_query($con->connect(),$query);?>

  <li class="box">
    <?= '<span class="email">' . $user_id . '</span>' ?>
    <?= '<span class="comment">' . $comment . '</span>' ?>
  </li>
<?php }?>

脚本

<script>
$(function () {
  $("#c_submit").click(function(e) {

    e.preventDefault();

    var product_id = $("#product_id").val();
    var user_id = $("#user_id").val();
    var comment = $("#comment").val();
    var rating = $("#rating").val();

    if (product_id === '' || user_id === '' || comment === '' || rating === ''){
      alert('Please Give Valid Details');
    } else {
      $.ajax({
        type: "POST",
        url : "include/comm.php",
        data : {
          product_id : product_id, user_id : user_id, comment: comment, rating:rating,
          c_submit: true
        },
        cache: false,
        success : function(html){
          console.log(html);
          $("ol#show_comment").append(html);
          $("ol#show_comment li:last").fadeIn("slow");
        }
      });
    }
  });
});
</script>

快速链接

1. 如果多个不同的HTML元素是不同的元素，是否可以具有相同的ID？
2. preventDefault（）事件方法

Answer 5

在不回显PHP输出之前，响应将为空白。

将以下代码放入变量中，并回显输出：

$output = '<li class="box">
            '<span class="email">' . $email . '</span>'
            '<span class="comment">' . $comment . '</span>'
        </li>';

并回显输出： echo $output

同样在JS中，当您发送html内容作为响应时，ajax的内容类型应该是html/text 。