jQuery 异步加载巧用

最新推荐文章于 2021-08-05 17:05:35 发布

xkjscm

最新推荐文章于 2021-08-05 17:05:35 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML javaScript 文章标签：异步加载 js加载数据

本文链接：https://blog.youkuaiyun.com/xkjscm/article/details/79026976

HTML 同时被 2 个专栏收录

7 篇文章

订阅专栏

javaScript

7 篇文章

订阅专栏

本文介绍了一个简单的前端示例，展示了如何通过JavaScript实现银行卡列表的获取及删除操作。具体包括使用$.getJSON发起请求获取用户银行卡列表，并动态生成银行卡项以便于进行后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<div id="wfwbItemList"></div>

js:

/**
 * 删除银行卡
 */
function removeBank(value) {
    console.log('=========');
    console.dir(value);
}
/**
 * 获取银行卡列表
 */
function listBankcard() {
    $.getJSON(list_bankcard_url,{'user_id':user_idObj.val(),'randam':Math.random()})
        //使用success方法判断是否接收成功
        .success(function (result) {
        if(result.status === 1){
            var arr=[];//定义一个数组,装载html
            $.each(result.data,function (index, value) {
                console.log(value.type_text);
                var wfwbItemHtml =
                    // 传值方式: 传入的值要有引号,这里要在js中引入要转义,不能传json对象,也不能传json字符串,因为json中有双引号,只能传值
                    '<div class="wfwbMain" onclick="removeBank(\''+value.type_text+'\')">'+
                        '<div class="wfwbItemMain">'+
                            '<img class="wfwbItemImg" src="'+bankcard_image_url+'" >'+
                            '<div class="wfwbInfo">'+
                                '<div class="wfwbName">'+value.type_text+'</div>'+
                                '<div class="wfwbNum">'+stringHidePart(value.card_number)+'</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>';
                arr.push(wfwbItemHtml);//将html循环装入数组
            });
            $("#wfwbItemList").html(arr.join(''));//查找一次控件id,一次性将html数组装到控件中
        }
    }).error(function (result) {//错误返回
        console.log('-------error-----------');
        console.dir(result);
    });
}