Jquery 如何使用ajax从json api获取json数组_Jquery_Json_Ajax

Jquery 如何使用ajax从json api获取json数组

jquery json ajax

Jquery 如何使用ajax从json api获取json数组,jquery,json,ajax,Jquery,Json,Ajax,我是这个领域的新手。我有一个带有多个数组的API。我想使用ajax通过在html输入中键入数组名称，以html格式获取任何数组的所有对象 { "players": [ { "name": "Marcos Alonso", "position": "Left-Back", }, { "name": "Marco van Ginkel", "position": "Central Midfield",

我是这个领域的新手。我有一个带有多个数组的API。我想使用ajax通过在html输入中键入数组名称，以html格式获取任何数组的所有对象

{
"players": [
    {
        "name": "Marcos Alonso",
        "position": "Left-Back",
    },
    {
        "name": "Marco van Ginkel",
        "position": "Central Midfield",
    }
articles": [
    {
        "author": "Stephen Walter",
        "url": "http://www.telegraph.co.uk/news/2017/04/15/disruptive-stag-party-revellers-thrown-plane-manchester-airport/",
    },
    {
        "author": "TMG",
        "url": "http://www.telegraph.co.uk/news/2017/04/15/north-korea-marks-anniversary-military-parade-pyongyang-pictures/",
    }],

...........
......
}

My index.php如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link  href="clientcss.css" rel="stylesheet" type="text/css"><!-- css styling connection -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type=text/javascript >
            $(document).ready(function () {
                $('#getstuff').click(function () {
                    var requestdata = $('#choi').val();
                    var result = $('resultdiv');

                    $.ajax({
                        url: 'http://localhost/v1/api/webapi',
                        method: post,
                        data: {search: requestdata},
                        dataType: 'json',
                        success: function (data) {
                            result.html('array: ' + data.search);
                        }
                    })
                });
            });
        </script>
        <title>clientside</title>
    </head>
    <body>
            <div id="clnt">
                <h3>Testing testing</h3>
                <table>
                    <input type="text"  id="choi" name="chi" placeholder="type something" size="30" required>                                
                </table>
                <button type="button"  id="getstuff" value="GetSearch">GettheData</button>
                <br/><br/>
                <div id="resultdiv">

                </div>
            </div>
    </body>
</html>


$（文档）.ready（函数（）{
$（'#getstuff'）。单击（函数（）{
var requestdata=$（'#choi'）.val（）；
var result=$（'resultdiv'）；
$.ajax({
网址：'http://localhost/v1/api/webapi',
方法：邮寄，
数据：{search:requestdata}，
数据类型：“json”，
成功：功能（数据）{
html（'array:'+data.search）；
}
})
});
});
客户端
测试
GettheData

请帮助我使用ajax/jQuery，通过键入或解析数组名称来获取数组的所有对象

我只想键入例如“players”并在“resultdiv”中获取players数组的所有对象，而无需刷新浏览器

感谢您的帮助。

如果API返回整个JSON对象，您不应该将

requestdata

传递给服务器，您应该使用它从响应中提取属性

$.ajax({
    url: 'http://localhost/v1/api/webapi',
    method: 'post',
    dataType: 'json',
    success: function (data) {
        var html = '<ul>';
        var array = data[requestdata];
        if (array) {
            $.each(array, function(key, value) {
                html += '<li>' + key + ': ' + value + '</li>';
            });
            result.html(html);
        }
    }
});

$.ajax({
网址：'http://localhost/v1/api/webapi',
方法：“post”，
数据类型：“json”，
成功：功能（数据）{
var html=''；
var数组=数据[requestdata]；
if（数组）{
$.each（数组、函数（键、值）{
html+=''+key+'：'+value+''；
});
html（html）；
}
}
});

请参见

查看我认为您的ajax调用应该在内部，而不是因为您希望在开始访问DOM之前已经呈现页面。@victor

$（document）。ready（）

在加载DOM后运行代码。数据中没有

搜索

属性，什么是

data.search

应该返回？

$（'resultdiv'）

应该是

$（'resultdiv'）

感谢您的贡献。在您的ajax代码中，我想问一下success函数中包含了哪些“数据”？“数据”中有什么？因为当我使用代码时，然后运行appl。什么也没发生。我键入了例如players并按下按钮，但什么也没发生。

数据

是API返回的JSON数据。它应该是您在问题顶部显示的对象。我对代码进行了一些修改，现在它可以工作了。if（array）{$.each（array，function（i）{$.each（array[i]，function（key，value）{html+='

'+key+'：'+value+'

'；}）；result.html（html）；}）；非常感谢！这不仅会显示与搜索条件匹配的数据。它还会显示

玩家

和

文章

，即使他们只是要求

玩家

。