时间戳

首页 > 解决方案 > 如何使变量在ajax上回显此数据

javascript - 如何使变量在ajax上回显此数据

问题描述

我有ajax代码：

 <script type="text/javascript">

    $(".monitor").click(function(){

        $("#list-format").html("");
        let nama_puskesmas = $(this).data('nama');
        let id_puskesmas = $(this).data('id');
        let nomor = $(this).data('nomor');
        let base_url = '<?php echo base_url();?>'
        

        $.ajax({
            url     : 'get_data',
            method  : 'post',
            dataType: 'json',
            data    : {id_puskesmas:id_puskesmas},
            success : function(response){

                $.each(response, function(i, obj){
                    $("#list-format").append("<li>"+obj.format+"</li>");
                });

                $("#title-modal").html(nama_puskesmas);
                $("#exampleModalCenter").modal('show');
                $("#button-submit").html(`<a href="${base_url}dinas/view_monitor/${id_puskesmas}" id="submit_modal" class="btn btn-primary">Lihat data</a>`)
                $("#button-submit2").html(`<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`)

               
            }


            
        })      

    })
</script>

如果我运行这个程序，它将如下所示：

Data yang belum diupload
1.Form Lap PTM
2.Form Lap Posbindu
3.Form Lap IVA
4.Form Lap Jiwa
5.Form Lap Indera dan Gimul
6.Form Lap Diare
7.Form Lap LROA
8.Form Lap Thypoid
9.Form Lap Laporan Hiv Aids dan IMS
10.Form Laporan Hepatitis

然后，我会将这些数据回显到我的另一个函数中。

如何从此代码中创建变量？

 $.each(response, function(i, obj){
                    $("#list-format").append("<li>"+obj.format+"</li>");
                });

对此作出回应：

$("#button-submit2").html(`<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`)

或者我可以对此#button-submit2 做出回应吗？

标签： javascriptajax

解决方案

<script type="text/javascript">
// this var contains a new element, which is not yet appended to the DOM
var $receivedItems = $('<div></div>');
$(".monitor").click(function(){

    $("#list-format").html("");
    let nama_puskesmas = $(this).data('nama');
    let id_puskesmas = $(this).data('id');
    let nomor = $(this).data('nomor');
    let base_url = '<?php echo base_url();?>'


    $.ajax({
        url     : 'get_data',
        method  : 'post',
        dataType: 'json',
        data    : {id_puskesmas:id_puskesmas},
        success : function(response){
            $.each(response, function(i, obj){
                // instead of echoing it directly by appending it to the DOM, store your list items in the hidden or not-appended element in your variable
                $receivedItems.append("<li>"+obj.format+"</li>");
                $("#list-format").append("<li>"+obj.format+"</li>");
            });

            // ..... your other stuff

            var buttonHtml = `<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`;
            var $button2 = $(buttonHtml);

            $button2.on('click', function(e) {
                // be aware to use href only as a fallback if js does not work. otherwise your url will change and js won’t be executed
                e.preventDefault();
                // on click, you can append the list items stored in $receivedItems
                $("#list-format").append($receivedItems.children());
            });
            // be aware of nesting a and button tags, you shouldn’t
            $("#button-submit2").append($button2);

        }

    })      

})
</script>

我在代码中添加了一些注释。在这种方法中，您可以将所有收到的项目存储在尚未附加到 DOM 节点的 jQuery 对象中。它将通过触发添加到 submit2 按钮的点击事件来实现。

推荐阅读