Блог

Главная - Вопросы по программированию - показывать данные в таблице с помощью ajax на одной странице

показывать данные в таблице с помощью ajax на одной странице

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

у меня проблема с 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));

?>

я много раз пытался, но это не работает и не показывает ошибку. а в консоли ничего не показывать. пожалуйста, помогите мне. это меня смущает.. спасибо, ребята………………………………………………..

Ответ №1:

Вы уверены, что этот вызов ajax выполнен? Куда вы это поместили?

Попытайтесь 

 console.log('here!');

Прямо перед вашим вызовом ajax, я предполагаю, что он не доходит до этой строки.

Поместите их в известное вам место, где они будут запущены, или в обратный вызов document ready

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

Ответ №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.

Комментарии:

1. я делаю с $(document).ready(function () { ...HERE... }); и делаю async:false . console. журнал ничего не показывает. пожалуйста, смотрите полный код jsfiddle

2. преобразование данных в json в порядке, я проверяю это в jsonlint

3. Вам нужно объявить переменную массива $return = []; перед циклом while, чтобы использовать ее после цикла while. Обновлено jsfiddle.net/tubuc90v/2

4. все те же ребята

5. я ничего не вижу в консоли. войти, но, если я изменю тип данных на text . это отображение полной страницы в console.log

Ответ №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
            }
            ?>