Question

我有一段代码可以在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>

Answer 1

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

document是JavaScript附带的变量（至少在浏览器上下文中）。相反，请尝试以下相关行。

$(document).ready(function() {

您还希望将onLoad属性从body标签中删除，否则它将运行两次。

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

Answer 3

这里充满了荣耀。简写，很棒的版本：

<强>已更新

<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结构是什么，因此您可能需要使用代码的附加部分。

上述情况不应该有效。

Answer 4

您不需要围绕文档引用。页面完全加载后，它将开始执行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);
    });
  });
});

Answer 5

试试这个，你的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可以帮助你。

这适用于大多数浏览器

你如何在jQuery中使用$（'document'）。ready（function（））？

5 个答案: