Question

我是html和java脚本的新手。我尝试创建一个按钮并从URL获取JSON并将结果添加到下拉列表中。在Nodejs服务器启动并运行后，如果您输入http://localhost:8080/restapi/test/projects，它将返回{example}作为结果。

所以这里有几个问题： 1）由于某种原因，按钮单击在jquery中不起作用 2）$ .getJSON只能在jquery里面使用，有没有其他方法可以从URL中获取JSON？

＆＃13;

$(document).ready(function () {
    $(document).on('click', '#button1', function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option = document.createElement('option');
                option = d;
                selector.add(option);
            });
        })
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
        <h1>project options</h1>
        <button id='button1'>Get Projects</button>
</div>
<div id='second'>
        <h2>all projects</h2>
        Projects: <select id='selector'></select>
</div>

＆＃13;

感谢您的任何提示。

Answer 1

{example}无效JSON。试试{"1":"example"}

此外，option = d;将覆盖您的选项。试试option.value = d;

以下是为您准备的清理版本：

$(document).ready(function () {
    $('#button1').click(function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, {"1":"example","2":"other example"},function (data) {
            $.each(data, function (index, d) {
                selector.options[selector.options.length] = new Option(d,d);
            });
        });
    });
});

小提琴： https://jsfiddle.net/trex005/65hc1srh/

Answer 2

尝试以下方法：

$(document).ready(function () {
    $('body').on('click', '#button1', function() {//this sintax is used most for dynamically added elements
        var selector = $('#selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option ='<option>'+d+'</option>';
                selector.append(option);
            });
        })
    })
})

Answer 3

点击按钮实际上正在运行......可能是响应存在问题。您可以通过打开检查器来检查网络日志。要在chrome上打开检查器，请右键单击然后“检查”或“检查元素”。

这是我点击按钮时发生的事情。

对于第二个问题，您可以使用XMLHttpRequest对象发出AJAX请求。

Answer 4

它不起作用，因为你没有点击确切的东西。你所做的只是$(document).click()，它不知道要点击的元素或文档。

您应该使用

 $('#button1').on('click',function() {

        });

单击按钮，表示仅在单击按钮时才会响应。为了更好地理解，我将提供代码段

$(document).ready(function () {
    $('#button1').on('click',function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option = document.createElement('option');
                option = d;
                selector.add(option);
            });
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
        <h1>project options</h1>
        <button id='button1'>Get Projects</button>
</div>
<div id='second'>
        <h2>all projects</h2>
        Projects: <select id='selector'></select>
</div>

它会起作用。如果没有，请检查你的api url。

按钮单击不在jquery内部工作

4 个答案: