logo标签列表

如何在jQuery中使用$('document').ready(function())？

javascriptjqueryeventsonload
5

我有一段代码在IE浏览器中可以正常工作，但在Firefox浏览器中无法运行。我认为问题是我没有成功实现$('document').ready(function)。我的JSON结构如下：[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]。 如果有人能查看我的代码并帮助我正确实现它，我将非常感激。这是我的代码：

<html><head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
     /jquery.min.js"></script>
     <script type="text/javascript" language="javascript">
     $(document).ready(function() { 
     $.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
     $.each(jsonData, function (i, j) {
     document.form1.fruits.options[i] = new Option(j.options);
     });});
     });
     </script></head>
     <body><form name="form1">
     My favourite fruit is :
     <select name="fruits" id="fruits" /></form></body>
</html>
哦，好的，谢谢指出，其实我不知道我还需要接受识别。 - XCeptable
这不是像你使用document.form1.fruits.options[i]设置水果选项那样的愚蠢行为吧？我只是想知道这是否是Firefox不喜欢的，而不是ajax/onload部分。如果在此之前插入一个警报，它会被触发吗？这是一种很好的测试方法。或者安装Firebug并查看JavaScript控制台中的错误。 - Chris
Firebug总是报告“语法错误”和“'a'未定义......”很多次。对于语法错误，它指向关闭括号和括号。我检查了很多次，但没有发现任何放错或漏掉的括号/括号。您也可以看到。还有一件事是，如果它是语法错误，那么为什么在IE中运行呢？ - XCeptable
不，警告框没有触发任何选项，甚至不是索引即i。Firebug控制台没有显示任何错误，只有4个警告。 - XCeptable
我已经纠正了代码，这是本地主机寻址方法的问题。我编辑了代码，在geJson中应该使用127.0.0.1而不是localhost。 - XCeptable
5个回答
4

简短版（由meeger建议）：不要在document周围使用单引号。

document是JavaScript自带的变量（至少在浏览器环境中）。相反，尝试使用以下代码替换相关行。

$(document).ready(function() {

您还需要将body标签上的onLoad属性移除，否则它会运行两次。

3
总结一下，不要在 document 周围使用单引号。 - user229044
@some 双引号的使用并不是问题；你也可以说“不要在 document 周围使用括号、美元符号、句点或逗号”。 - user229044
2

只需运行 $(document).ready(function() {doStuff})。这将在文档准备就绪时自动运行。

我认为最好的做法是不要在html本身中放置任何事件。这样可以将html文档的结构与其行为分离。而是在$(document).ready函数中附加事件。

<html>
  <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function() { 
           $.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
             var selectElem = $('#fruits');

             for(var i = 0; i < jsonData.length; i++) { 
               selectElem.append($('<option>').html(jsonData[i].options));
             }

           });
       });
     </script>
  </head>
  <body>
    <form name="form1">
      My favourite fruit is :
      <select name="fruits" id="fruits" />
    </form>
  </body>
</html>

编辑： 我进行了以下测试，并模拟了JSON对象，因为我无法自己进行调用。

<html>
  <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function() {
           var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]');
           var selectElem = $('#fruits');

           for(var i = 0; i < jsonData.length; i++) { 
             selectElem.append($('<option>').html(jsonData[i].options));
           }

       });
     </script>
  </head>
  <body>
    <form name="form1">
      My favourite fruit is :
      <select name="fruits" id="fruits" />
    </form>
  </body>
</html>
我向您推荐http://api.jquery.com/ready/。一旦页面完全加载，.ready函数将被调用。如果需要，您可以定义多个函数，它们将按照在页面上出现的词法顺序运行。我只是想说，在HTML本身中避免使用onLoad事件，因为它在设计方面没有太多的灵活性。 - shoebox639
使用当前的代码，控制台没有显示错误，但有4个警告。使用您的代码，它会提示“$未定义”，并在这一行上突出显示：$(document).ready(function()。看起来很有趣。我通过警报进行了检查，但是即使我是索引，警报也没有触发任何内容。 - XCeptable
实际上，我是通过运行 PHP 文件并回显 JSON 数据来复制此 JSON 数据的。正如您所看到的，它被转换为准确的 JSON 格式，这可能是在 getJson 中发生的事情。我甚至尝试更改 jQuery 库源，并使用完整的 jQuery .each 语法，这可能会有所帮助，但是结果仍然不理想。[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}] - XCeptable
我将jquery引用更改为"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"，现在它引发了这个错误：指向jquery库的错误：this.ratedStars未定义。 源文件：http://old.nabble.com/jQuery,-$-is-Not-Defined-Errors-td18801392s27240.html 行：194 错误：t为空 源文件：http://old.nabble.com/jQuery,-$-is-Not-Defined-Errors-td18801392s27240.html 行：1411 - XCeptable
好的，使用您的第二组代码，现在情况正好相反。也就是说，它在Firefox中可以工作，但在IE中无法工作。 - XCeptable
显示剩余9条评论
2

这是完整的版本。简写版如下：

已更新


（注意：保留了HTML标签）
<script type="text/javascript" language="javascript">
    $(function() { 
        $.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
            var cacheFruits = $('#fruits'),
                cacheOption = $(document.createElement('option'));

            $.each(jsonData, function (i, j) {
                cacheFruits.append(
                    cacheOption.clone().attr('value', j.options).html(j.options)
                );
            });
        });
    });
</script>

当然，我不知道你的JSON结构是什么样的，所以你可能需要尝试使用代码的追加部分。
以上代码应该没有任何问题。
我更喜欢使用$.ready(function)，因为它的命名略微不那么神奇。jQuery.ready。只是出于好奇，为什么不使用$('<option/>')进行创建？ - user166390
我尊重您的立场，但我不会称这为魔法。嗯，实际上我会，但原因不同。使用document.createElement()的原因是它比字符串解析的$('<option/>')版本更快。 - Stephen
@Stephen 不，它不起作用。你说我需要删除<body onload>，这意味着它应该只是一个普通的body标签<BODY>。我的JSON结构是这样的[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]。 - XCeptable
我编辑了代码，它仍然可以在IE中运行，但在Firefox中无法运行。你现在能看出问题了吗？谢谢。 - XCeptable
我更新了代码。如果它不起作用，那么你可能有其他问题。可能是重复的ID或其他无效的HTML问题。 - Stephen
我测试了你的代码，现在我发现了错误并且在我所做的更正下，在IE和FF中都可以工作。非常感谢你的帮助。 - XCeptable
0

在文档周围不需要引号。一旦页面完全加载，它将开始执行您在ready()中定义的任何内容。

$(document).ready(function() { 
  $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
    $(this).each(jsonData, function (i, j) {
      document.form1.fruits.options[i] = new Option(j.options);
    });
  });
});
0

尝试一下，你的JSON数据应该是这个格式：

[{'text':'sometext','value':'somevalue'},{'text':'sometext','value':'somevalue'}];


$(document).ready(function() { 
  $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
    var options = [];
    $.each(jsonData, function (i, j) {
      options.push('<option value="' + j.value + '">'  + j.text + '</option>');
    });
    $('#fruits').html( options.join(''));
  });
});

请注意这里可能存在编码/转义问题。 确保你从服务器端正确地转义文本。 htmlentities、htmlspecialchars可以帮助你解决这个问题。
这在大多数浏览器中应该能正常工作。
我已经测试过了，即使现在代码已经更正，它仍然无法在IE中运行。 - XCeptable
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接