Question

我正在学习Nodejs节点食谱第2版。

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

示例代码是通过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>

其次，server.js文件

var http = require('http');
var fs = require('fs');
var path = require('path');
var profiles = require('./profiles');
var xml2js = require('xml2js');

var index = fs.readFileSync('index.html');
var routes, mimes = {xml: "application/xml", json: "application/json"}

function output(content, format, rootNode) {
    if (!format || format === 'json') {
        return JSON.stringify(content);
    }
    if (format === 'xml') {
        return (new xml2js.Builder({rootName: rootNode})).buildObject(content);
    }
}

routes = {
    'profiles': function (format) {
        return output(Object.keys(profiles), format);
    },
    '/profile': function (format, basename) {
        return output(profiles[basename], format, basename);
    }
};

http.createServer(function (request, response) {
var dirname = path.dirname(request.url),
    extname = path.extname(request.url),
// $.get('http://localhost:8080/profile/' + $('#profiles').val() + '.' + format
    basename = path.basename(request.url, extname);

    extname = extname.replace('.', ''); //remove period


    response.setHeader("Content-Type", mimes[extname] ||'text/html');

    if (routes.hasOwnProperty(dirname)) {
        response.end(routes[dirname](extname, basename));
        return;
    }
    if (routes.hasOwnProperty(basename)) {
        response.end(routes[basename](extname));
        return;
    }
    response.end(index);    
}).listen(8080);

下面是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."
    }
};

我认为索引文件 $（“＃formats，＃profile”）。change（function（）{无效。

我只输入警报（“2”）;测试代码，但我从未见过警报。

我还尝试更改代码

$（“＃formats”）。change（function（）{，

$（“＃profiles”）。change（function（）{

他们两个都没有工作。

你能让我知道是什么原因吗？

Answer 1

将客户端代码包装在DOM ready语句中，或将其移至<body>的末尾。您的脚本在页面呈现之前正在执行。

select元素的change（）不起作用

1 个答案: