如何使用 $.ajax() jquery 获取数据并显示到 HTML 网页

debugcn 发表于 Dev

史蒂夫

我需要帮助从https://jsonplaceholder.typicode.com/检索数据。这是我的 AJAX 调用：

$.ajax({
  url: root + '/posts/',
  data: { userId: 1 },
  type: "GET",
  dataType: "json",
  success: function(data) {   
    $("#posts").html("<p><h3>" + data[0].title + "</h3></p>");
    console.log(data);
    $("#posts").append("<p>" + data[0].body + "</p>");
    console.log(data);
  }
});

如何data: userId将不仅设置为1，而且设置为1 到 5 或 1 到 10 之类的值范围？以及如何通过显示在我的 html 文件中来附加所有这些？

克里斯蒂安4423

简单的点击方式

HTML：

<div data-action="getUsers" data-users="1,2,3,4,5">Get Users</div>

JS：

$(function(){
    $("[data-action=getUsers]").on("click", function(){
        // get userId someway
        var $this = $(this);
        var data = $this.data();
        var users_string = data.users;
        var userIds_str_array = users_string.spilt(","); // this will turn a string into an array of strings split by given char
        var userIds_int_array = [];
        var length = (userIds_str_array.length - 1);
        // convert to ints, might be overkill, strings might be fine, this is your call
        for(let i = length; i--;){ // short hand for-loop, use if order doesnt matter
            let value = userIds_str_array[i];
            let test_val = parseInt(value);
            // short hand if
            // return true to skip iteration
            isNaN(test_val) === false ? userIds_int_array.push(value) : return true;
        }
        // make sure you are not wasting your time.
        if(userIds_int_array.length > 1){
            return GetUserFromPosts(user, function(responce){
                if(responce.users){
                    if(responce.users.length > 0){
                        // func call
                        return doSomethingWithUsers(responce.users);
                    }else{
                        return false; // no users in array
                    }
                }else{
                    return false; // there was probably a 500 error
                }
            });
        }
        else
        {
            return false // no users in array
        }
    })
})

function GetUserFromPosts(userId_arr, callback){
    var data = {userId: userId_arr}; // I assume your api can accept an array, if not, you have to do seperate calls for each one. 
    $.ajax({
        url: root + '/posts/',
        data: data,
        success: function(data) {   
            console.log(data);
            return callback(data);
        }
   });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。