Javascript 按钮单击在jquery中不起作用

我不熟悉html和java脚本。我尝试创建一个按钮，从URL获取JSON，并将结果添加到下拉列表中。Nodejs服务器启动并运行后，如果输入，它将返回{example}作为结果

这里有几个问题： 1） 由于某些原因，按钮单击在jquery中不起作用 2） $.getJSON只能在jquery中使用，是否有其他方法从URL响应获取JSON

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'按钮1'，函数（）上{
var selector=document.getElementById（'selector'）；
var-api='1〕http://localhost:8080/restapi/test/projects';
$.getJSON（api，函数（数据）{
$。每个（数据，函数（索引，d）{
var option=document.createElement（'option'）；
选项=d；
选择器。添加（选项）；
});
})
})
})

项目选择
获取项目
所有项目
项目：

尝试以下操作：

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

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'#button1'，function（）{//此sintax最常用于动态添加的元素
变量选择器=$（“#选择器”）；
var-api='1〕http://localhost:8080/restapi/test/projects';
$.getJSON（api，函数（数据）{
$。每个（数据，函数（索引，d）{
var期权=''+d+''；
选择器.append（选项）；
});
})
})
})

单击按钮实际上正在工作。。。也许是反应有问题。 您可以通过打开inspector来检查网络日志。 要在chrome上打开inspector，请右键单击，然后单击“inspect”或“inspect element”

这就是我单击按钮时发生的情况

---

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

它将不起作用，因为您没有执行所单击的操作。您所做的只是

$（文档）。单击（）

，它不知道要单击哪些元素或文档

你应该用

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

        });

对于button click，它告诉您只有在单击按钮时才会响应。为了更好地理解，我提供了代码片段

$（文档）.ready（函数（）{
$（'#button1'）。在（'click'，function（）上{
var selector=document.getElementById（'selector'）；
var-api='1〕http://localhost:8080/restapi/test/projects';
$.getJSON（api，函数（数据）{
$。每个（数据，函数（索引，d）{
var option=document.createElement（'option'）；
选项=d；
选择器。添加（选项）；
});
});
});
});

项目选择
获取项目
所有项目
项目：
{example}
不是有效的JSON。尝试
{“1”：“示例”}

另外，
选项=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);
            });
        });
    });
});

Fiddle:
您也可以使用Ajax从URL获取JSON响应您当然不需要使用jQuery（或任何其他库）在JS中执行任何操作，包括发出web请求。然而，您会发现库使许多事情变得更简单，因为这些工作已经为您完成了，没有理由重新发明轮子。如果希望在不使用jQuery的情况下发出AJAX请求，请查看内置对象。这就是jQuery在所有简单性下面使用的功能：）按钮单击正在工作，您可以通过在该单击功能中放置一个警报或控制台来检查它。可能您在系统中的其他地方有多个IDcode@MatthewHerbst谢谢你的提示。我正在查看XMLHttpRequest并试图理解它。似乎响应是返回文本或XML数据。如果我希望返回一个JSON对象，我是否还必须使用jQuery？我很新，还在学习。嗨，特雷克斯，谢谢你的回答。我只是将您的代码放入我的NetBeans IDE8.1 HTML5项目中，但单击按钮后的结果不会添加到下拉列表中。你知道吗？我正在谷歌Chrome上调试，也尝试过IE。你在小提琴中的例子正是我想要达到的。您知道为什么需要将java脚本中的类型设置为onLoad吗？我应该如何实现它？在生成新项目时，我正在使用NetBeans提供的jquery。非常感谢。天哪。。。我让它在Eclipse中工作，但在NetBeans中不工作。谢谢trex，你的代码和我想要的完全一样。