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慢跑，轻弹石英，vex若虫。华尔兹，坏若虫，快速夹具vex ！狐狸若虫匆匆忙忙地跳华尔兹。“砖问答”

Answer 1

我尝试了您的代码段并发现了一些问题：

由于您正在使用a，并且您将事件侦听器附加到提交按钮并且不使用preventDefault（），因此单击按钮将使浏览器在不使用AJAX的情况下发送表单数据。我建议你使用preventDefault（）来阻止同步过程，而不是使用AJAX。
PHP代码依赖于c_submit POST数据，这些数据在javascript提交的已形成数据中不存在。所以PHP将完全忽略if（）块。这就是您没有看到预期结果的原因。我建议您更新if条件或只使用其他变量。
你的javascript代码中有一个拼写错误，你在dataString变量中包含了一个多余的空格。
我同意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

您必须首先阻止点击或提交事件的默认行为。您可以通过在事件处理程序的开头添加此行来执行此操作。此外，我从未见过使用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函数对象中的数据参数或字段。您可以根据解决方案here和代码here找到示例。

Answer 3

将您的ol ID更改为comment_answer或您想要的任何其他内容，因为comment上已有input个ID。

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

你需要阻止表单提交的默认行为，现在当你调用提交按钮时应该刷新页面，不应该这样做，因为只需在ajax调用之后写return false;，在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"＆amp; <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>' ?>这一行。

未定义的索引$email

在定义$email的地方，

将为no。所以，检查一下。我已将其替换为$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>

快速链接

Can multiple different HTML elements have the same ID if they're different elements?

preventDefault() Event Method

Answer 5

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

在变量中取以下代码并回显输出：

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

并回显输出：echo $output

同样在JS中，ajax内容类型应为html/text，因为您要发送html内容作为响应。

我的ajax电话没有给出任何错误和回复

5 个答案: