我的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 。