javascript - 我的 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 测验由狐狸幼崽增光添彩。Bawds 慢跑，轻弹 quartz ，烦恼女神。华尔兹，坏女神，用于快速夹具烦恼!狐狸仙女捕获快速跳华尔兹。砖 block 测验“

Answer 1

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

1. 由于您使用的是 ，并且将事件监听器附加到提交按钮并且不使用 PreventDefault()，因此单击按钮将使浏览器在不使用 AJAX 的情况下发送表单数据。我建议您使用preventDefault()来阻止同步过程并使用AJAX。
2. PHP 代码依赖于 c_submit POST 数据，该数据不存在于 javascript 提交的形成数据中。所以 PHP 将完全忽略 if() block 。这就是为什么您看不到预期结果的原因。我建议您更新 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"])){
    ....
}