Question

我是这个领域的新手。我有一个包含多个数组的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/",
    }],

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

我的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>

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

我想只输入“玩家”并在“结果”中获取玩家阵列的所有对象而不刷新浏览器。

感谢您的帮助。

Answer 1

如果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);
        }
    }
});

请参阅Dynamically access object property using variable

如何使用ajax

1 个答案: