Question

我在同一页面遇到ajax问题。我的代码：

        $.ajax({
            type: "POST",
            url: "test.php",
            dataType: 'json',
            data: {},
            success: function (data) {
                console.log(data);
                var teks = "";
                $.each(data.detail, function (index, val) { //looping table detail bahan
                    var no = val.no;
                    var tanggal = val.tanggal;
                    var jml_in = val.barang_in;
                    var jml_out = val.barang_out;
                    var pihak_zenitha = val.pihak_zenitha;
                    var pihak_vendor = val.pihak_vendor;

                    teks += "<tr class='tr_detail'><td>" + no +
                            "</td><td>" + tanggal +
                            "</td><td>" + jml_in +
                            "</td><td>" + jml_out +
                            "</td><td>" + pihak_zenitha +
                            "</td><td>" + pihak_vendor +
                            "</td></tr>";
                });
                $(".tbody_target").append(teks);
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table" style="border: 1px solid #000;">
        <thead>
            <tr>
                <th class="w2 text-center">No</th>
                <th class="w8 text-left">Tanggal</th>
                <th class="w10 text-center">IN Zenitha</th>
                <th class="w10 text-center">OUT Zenitha</th>
                <th class="w35 text-left">Pihak Zenitha</th>
                <th class="w35 text-left">Pihak Vendor</th>
            </tr>
        </thead>
        <tbody class="tbody_target">
        </tbody>
    </table>

<?php

//data convert to json
exit(json_encode($return));

?>

我尝试了很多次，但它不起作用而且没有显示错误。并在控制台，没有显示任何事情。请帮我。它让我感到困惑..谢谢你们.......................................... ..............

Answer 1

你确定这个ajax调用已经执行了吗？你把它放在哪里了？

尝试

console.log('here!');

在你的ajax通话之前，我的猜测是它没有到达这条线。

将它放在您知道将被触发的位置，或者在文档准备好的回调中

$(document).ready(function () { ...HERE... });

Answer 2

首先，您应该将代码包装在ready。

中

<强>的Ajax

$(document).ready(function(){
     $.ajax({
            url: "test.php",
            type: "POST",
            data: {'isAjax': 'yes'},
            success: function (data) {
                console.log(data);
                $(".tbody_target").append(data);
            }
        });
 });

PHP代码

if(!empty($_POST))
{
  //data convert to json
  $return = [1,2];
  echo json_encode($return);
  exit;
}

需要注意的事项：

Ajax应该有POST数据来识别，需要返回数据。
$_POST数据应位于PHP的第一行。
使用echo将数据返回到Ajax请求，并使用exit()在ajax调用时停止执行。

Answer 3

            <?php
            if(!empty($_POST)){
          //connect to db or do what ever to retern
          // $return = JSON
            header('Content-type: application/json');
            echo json_encode($return);
            }else{
            ?>
<!DOCTYPE html>
<html>
    <head>
    <title>ajax call</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
            <body>
            <table class="table" style="border: 1px solid #000;">
                    <thead>
                        <tr>
                            <th class="w2 text-center">No</th>
                            <th class="w8 text-left">Tanggal</th>
                            <th class="w10 text-center">IN Zenitha</th>
                            <th class="w10 text-center">OUT Zenitha</th>
                            <th class="w35 text-left">Pihak Zenitha</th>
                            <th class="w35 text-left">Pihak Vendor</th>
                        </tr>
                    </thead>
                    <tbody class="tbody_target">
                    </tbody>
                </table>
        <script>
                    $.ajax({
                        type: "POST",
                        url: "test.php",
                        dataType: 'json',
                        data: {},
                        success: function (data) {
                            console.log(data);
                            var teks = "";
                            $.each(data.detail, function (index, val) { //looping table detail bahan
                                var no = val.no;
                                var tanggal = val.tanggal;
                                var jml_in = val.barang_in;
                                var jml_out = val.barang_out;
                                var pihak_zenitha = val.pihak_zenitha;
                                var pihak_vendor = val.pihak_vendor;

                                teks += "<tr class='tr_detail'><td>" + no +
                                        "</td><td>" + tanggal +
                                        "</td><td>" + jml_in +
                                        "</td><td>" + jml_out +
                                        "</td><td>" + pihak_zenitha +
                                        "</td><td>" + pihak_vendor +
                                        "</td></tr>";
                            });
                            $(".tbody_target").append(teks);
                        }
                    });
        </script>
    </body>
    </html>
            <?php
            }
            ?>

在同一页面中使用ajax显示数据

3 个答案: