Javascript select元素的change（）无效_Javascript_Jquery_Ajax_Node.js

Javascript select元素的change（）无效

javascript jquery ajax node.js

Javascript select元素的change（）无效,javascript,jquery,ajax,node.js,Javascript,Jquery,Ajax,Node.js,我正在学习Nodejs与node烹饪书第二版我喜欢这本书，因为它教我们解释看起来非常实用的示例代码示例代码是通过AJAX部分传输的浏览器服务器的一部分不管怎样，主要的问题是下面是EX代码，下面是index.html文件 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.

我正在学习Nodejs与node烹饪书第二版

我喜欢这本书，因为它教我们解释看起来非常实用的示例代码

示例代码是通过AJAX部分传输的浏览器服务器的一部分

不管怎样，主要的问题是下面是EX代码，下面是index.html文件

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script>
            $.get("http://localhost:8080/profiles",function (profile_names) {
                $.each(profile_names, function (i, pname) {
                    $("#profiles").append("<option>" + pname + "</option>");
                });
            }, "json");
            $("#formats, #profiles").change(function () {
                alert("2");
                var format = $("#formats").val();
                $.get("http://localhost:8080/profile/" + $("#profiles").val() + "." + format,
                    function (profile, stat, jqXHR) {
                        var cT = jqXHR.getResponseHeader("Content-Type");
                        $("#raw").val(profile);
                        $("#output").html('');
                        if (cT === "application/json") {
                            $.each($.parseJSON(profile), function (k, v) {
                                $("#output").append("<b>" + k + "</b> : " + v + "<br>");
                            });
                            return;
                        }
                        if (cT === "application/xml") {
                            profile = jqXHR.responseXML.firstChild.childNodes;
                            $.each(profile, function (k, v) {
                                if (v && v.nodeType === 1) {
                                    $("#output").append("<b>" + v.tagName + "</b> : " + v.textContent + "<br>");
                                }
                            });
                        }
                    }, 
                "text");
            });
        </script>
        <style>
            #frm, #raw {display:block; float:left; width:210px},
            #raw {height:150px; width:310px; margin-left:0.5em}
        </style>
        <title> INDEX </title>
    </head>

    <body>
        <form id="frm">
            Profile: <select id="profiles">
            <option> </option>
            </select>
            <br></br>

            Format:<select id="formats">
            <option value="json"> JSON </option>
            <option value="xml"> XML </option>
            </select>
            <br></br>
            <div id="output"></div>
        </form>
        <textarea id="raw"></textarea>
    </body>
</html>

下面是profiles.js文件

module.exports = {
    ryan: {
        name: "Ryan Dahl",
        irc: "ryah",
        twitter: "ryah",
        github: "ry",
        location: "San Francisco, USA",
        description: "Creator of node.js"
    },
    isaac: {
        name: "Isaac Schlueter",
        irc: "isaacs",
        twitter: "izs",
        github: "isaacs",
        location: "San Francisco, USA",
        description: "Former project gatekeeper, CTO npm, Inc."
    }
};

我认为在索引文件$（“#格式，#配置文件”）.change（函数（）{不起作用

我只是输入alert（“2”）来测试代码，但我从未见过该警报

我还尝试更改代码，如

$（“#格式”）.change（函数（）{

$（“#配置文件”）。更改（函数（）{

他们两人都不工作

您能告诉我原因吗？

将您的客户端代码包装在DOM就绪语句中，或者将其移动到

的末尾。您的脚本在页面呈现之前就已执行。

在我将脚本代码移动到末尾之后，它就开始工作了。非常感谢您。使用alert验证您的理论是个好主意，但您应该学习to在开发人员工具中使用调试器，这比使用警报进行调试容易得多。在这种情况下，您可以使用断点停止调试，并查找

$（“#格式，#配置文件”）

当时是空的。@非常感谢。我有一个问题。你说我需要使用调试器，我只使用编辑器“升华文本2”。在这个使用Nodejs、jquery和ajax的示例代码中，我可以使用哪个调试器？当你在Chrome（推荐）或Firefox中打开页面时，你可以打开开发工具（Chrome中的F12），使用它，您可以查看客户端代码（不是Node.js，而是提供给浏览器的javascript），还可以设置断点、检查值等。我推荐优秀免费课程中的第1-4课

module.exports = {
    ryan: {
        name: "Ryan Dahl",
        irc: "ryah",
        twitter: "ryah",
        github: "ry",
        location: "San Francisco, USA",
        description: "Creator of node.js"
    },
    isaac: {
        name: "Isaac Schlueter",
        irc: "isaacs",
        twitter: "izs",
        github: "isaacs",
        location: "San Francisco, USA",
        description: "Former project gatekeeper, CTO npm, Inc."
    }
};