簡體   English   中英

你如何在jQuery中使用$('document')。ready(function())?

[英]How do you use $('document').ready(function()) in jQuery?

我有一段代碼在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>

簡短版本(由meeger建議):不要在文檔周圍使用單引號。

document是JavaScript附帶的變量(至少在瀏覽器上下文中)。 相反,請嘗試以下相關行。

$(document).ready(function() {

您還需要從body標簽中取出onLoad屬性,否則它將運行兩次。

只需運行$(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>

這里充滿了榮耀。 速記,真棒版本:

更新

<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結構是什么,所以你可能需要使用代碼的append部分。

應該沒有理由說上面的原因是行不通的。

你不需要在文檔周圍引用。 頁面完全加載后,它將開始執行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);
    });
  });
});

試試這個,你的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可以幫助你。

這適用於大多數瀏覽器

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM