Question

我坚持这个ajax电话。我试图做的是从我的项目中的django视图文件中从ajax调用（return_data，也称为item_list）返回的数据中提取数据。由于我输入的django模型模块中的代码，这些项目是按字母顺序提取的。由于我是Django的新手，我的问题是通过点击＆＃34;显示更多按钮＆＃34;来获取ajax调用以在return_data / item_list列表中提供接下来的3个项目，并将这些项目加载到页面上。有人可以打破我这样做的方式吗？提前谢谢！

$(document).ready(function() {
    var config = {
        type: 'GET',
        url: SUBMIT_URL, //written in script tags in template , var SUBMIT_URL = "{%   //url 'get_next_concepts' %}"
        data: {

        },
        dataType: 'html',
        success: function (return_data, textStatus_ignored, jqXHR_ignored)  {
            alert("The AJAX call worked!" + return_data); //Just checks to make sure     
//data I need is returned
        }
    };
    $("#showmore").click(function() {
        $.ajax(config);
        $("table").append("<tr></tr>");
        for (var i = 0; i < 3; i++) {
            var itemdescription = return_data.index(i).description;
            var icon = return_data.index(i).icon;
            var itemName = return_data.index(i).icon;
            $("table tr:last").append(
                    generateCard(itemName,
                            itemdescription,
                            icon));
        }
    });

function generateCard(itemNameC, descriptionC, iconC) {     // Function to make card 
   //containing item information (name, icon and description
var card = "<td class='tablecells'><a class='tabletext' href='#'><span class='fa "
        + iconC
        + " concepticons'></span><h2 class='header'>"
        + itemNameC
        + "</h2><p>"
        + descriptionC
        + "<span class='fa fa-chevron-circle-right'></span></p></a></td>";
return card;
}

Answer 1

也许是这样的：

var indexLast = 0;
$("#showmore").click(function() {
    $.ajax({
        type: 'GET',
        url: SUBMIT_URL,
        data: {
            indexStart: indexLast  //you'll need you backend to take this index and get the next 3 items from the list starting at this index count, so first time, get first 3, second call you would need to get 3-5, 6-9, etc
        },
        dataType: 'html',
        success: function (return_data, textStatus_ignored, jqXHR_ignored)  {
            indexLast += 3;  //add 3 to the index
            // Now Use the Data here, or save to a variable and use elsewhere.
            // if your sever simply returns the table formated data already you can just call your jQuery.append(return_data) and your done.
        }
    });

});

Django项目中的AJAX调用：从列表中加载下3个项目

1 个答案: