大佬们帮忙看下我这ajax写错了吗_JavaScript_论坛

大佬们帮忙看下我这ajax写错了吗

pu***04 分类：JavaScript 人气：903 回帖：3 发布于6年前收藏

$.ajax({
         url : "data.json",
           method: 'get',
       dataType: "json",
       contentType: "application/json",
    success: function(data){
         //把字符串转成数组
      for(var i in data){
      //循环有多少条数据
                $('<div class="cell">'
                    + '<a class="user_avatar pull-left" href="#" target="_blank">'+'<img src="'+data[i].url1+' " />'
                    +'</a>'
                    +'<span class="reply_count pull-left">'
                        +'<span class="count_of_replies" title="回复数">'+data[i].reply+'</span>'
                        +'<span class="count_seperator">'+"/"+'</span>'
                        +'<span class="count_of_visits" title="访问数">'+data[i].visit+'</span>'
                    +'</span>'
                    +'<div class="topic_title_wrapper">'
                        +'<span class="'+data[i].kind+ ' ">'+'</span>'
                        +'<a class="topic_title">'+data[i].title+'</a>'
                    +'</div>'
                    +'<a class="last_time pull-right">'
                        +'<img class="user_small_avatar" src="'+data[i].url2+'">'
                        +'<span class="last_active_time">'+data[i].lastTime+"小时前"+'</span>'
                    +'</a>'
                +'</div>'
                ).appendTo($("#content_froum"));
                 
    }
}





{ "responseHeader": {"status":"0024","desc":"获取论坛列表成功"},
  "responseBody":[{
            "url1": "../../../images/common/head/head_01",
            "reply": "22",
            "visit": "200",
            "kind": "put_up",
            "link": "",
            "title": "春风十里扬州路，卷上珠帘总不如",
            "url2": "../../../images/head/head_21.jpg",
            "lastTime": "3小时前"
        },
        {
            "url1": "../../../images/common/head/head_01",
            "reply": "22",
            "visit": "200",
            "kind": "put_up",
            "title": "春风十里扬州路，卷上珠帘总不如",
            "url2": "../../../images/head/head_21.jpg",
            "lastTime": "3小时前"
        },
        {
            "url1": "../../../images/common/head/head_01",
            "reply": "22",
            "visit": "200",
            "kind": "put_up",
            "title": "春风十里扬州路，卷上珠帘总不如",
            "url2": "../../../images/head/head_21.jpg",
            "lastTime": "3小时前"
        },
        {
            "url1": "../../../images/common/head/head_01",
            "reply": "22",
            "visit": "200",
            "kind": "put_up",
            "title": "春风十里扬州路，卷上珠帘总不如",
            "url2": "../../../images/head/head_21.jpg",
            "lastTime": "3小时前"
        }]
     }

能输出到页面上两条全是undefined

http://127.0.0.1:8020/self_service_platform/views/documentCenter/forum/undefined 404 (Not Found)
控制台报这个错误

标签：ajax html html5 javascript

讨论这个帖子（3）垃圾回帖将一律封号处理……

Lv5 码农

bb***82 Linux系统工程师 6年前#1

先说结论：写错了，contentType是给发送的data用的，而且如果你就是拿个json的话根本不用写这么多。

上代码(手机写的所以请忽略格式。。。)：

$.getJSON("data.json", function(data){
    var html = [];
    $.each(data, function(index,item){
        var i = 
            '<div class="cell">'+
               '<a class="user_avatar pull-left" href="#" target="_blank">'+
                     '<img src="'+item.url1+' " />'+
               '</a>'+
               '<span class="reply_count pull-left">'+
                   '<span class="count_of_replies" title="回复数">'+item.reply+'</span>'+
                   '<span class="count_seperator">'+"/"+'</span>'+
                   '<span class="count_of_visits" title="访问数">'+item.visit+'</span>'+
               '</span>'+
               '<div class="topic_title_wrapper">'+
                   '<span class="'+item.kind+ ' ">'+'</span>'+
                   '<a class="topic_title">'+item.title+'</a>'+
               '</div>'+
               '<a class="last_time pull-right">'+
                   '<img class="user_small_avatar" src="'+item.url2+'">'+
                   '<span class="last_active_time">'+item.lastTime+"小时前"+'</span>'+
               '</a>'+
           '</div>';
        html.push(i);
    }
    $("#content_froum").append(html);
});

Lv3 码奴

二***了交互设计师 6年前#2

$.ajax({
        url: "data.json",
        method: 'get',
        dataType: "json",
    }).done(function(data) {
        console.log(data);
        console.log(data.responseBody);
        let list = data.responseBody;
        for(const item of list) {
            // 循环有多少条数据
            $('<div class="cell">' +
                '<a class="user_avatar pull-left" href=" " target="_blank">' +
                '<img src="' + item.url1 + ' " />' +
                '</a >' +
                '<span class="reply_count pull-left">' +
                '<span class="count_of_replies" title="回复数">' + item.reply + '</span>' +
                '<span class="count_seperator">' + ' / ' + '</span>' +
                '<span class="count_of_visits" title="访问数">' + item.visit + '</span>' +
                '</span>' +
                '<div class="topic_title_wrapper">' +
                '<span class="' + item.kind + ' ">' + '</span>' +
                '<a class="topic_title">' + item.title + '</a >' +
                '</div>' +
                '<a class="last_time pull-right">' +
                '<img class="user_small_avatar" src="' + item.url2 + '">' +
                '<span class="last_active_time">' + item.lastTime + "小时前" + '</span>' +
                '</a >' +
                '</div>'
            ).appendTo($("#content_froum"));

        }
    }).fail(function(e) {
        console.log(e);
    });

这个是我现在代码调用成功谢谢二位大大

Lv4 码徒

逆***团 Linux系统工程师 6年前#3

先打印data看下请求是否成功，是否正确。

另外遍历数组的正确方式是for循环或者forEach方法，for...in常用来遍历对象属性

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取