按钮单击在 jquery 中不起作用

Question

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

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

 $(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); }); }) }) })

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

感谢您提供任何提示。

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 网址。