jQuery在Ajax調用後寫入元素

你好，我有一個jQuery函數，它會發送到一個php文件的一些信息。 PHP文件將完成它應該做的事情，並將生成一些HTML代碼。我很好，直到這裏。jQuery在Ajax調用後寫入元素

現在的問題是，我已經接受了由該PHP文件生成的HTML結果，並將它們寫入創建Ajax調用的頁面中，只需將它追加到DIV之後或DIV內部即可。

這是jQuery的功能，我到目前爲止：

$(document).ready(function() { 
var idGenre = $("#txtGenre option:selected").val(); 
var html = $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: "id=" + idGenre, 
      async: false 
      }).responseText; 

});

必須從PHP文件所採取的HTML結果GetSubGenreData.php是被更新的DIV：

<div id ="divSubGenre"></div>

現在，讓我們說PHP文件將返回一個選擇框，如下所示：

<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
etc... 
</select>

此選擇框必須只要在DIV <div id ="divSubGenre"></div>之後附上，或者簡單地用返回的選擇框替換這個DIV即可。一個好的jQuery開發人員不是不可能的。但我不是。

我只需要在右邊的DIV中寫入來自PHP文件的HTML結果的函數。

謝謝！

來源

2011-07-20 DiegoP.

在你的成功回調

success:function(html){ 

$("#divSubGenre").append(html); 
}

如果你想與Ajax響應更換div容器

success:function(html){ 

$("#divSubGenre").replaceWith(html); 
}

如果div到要追加的結果不爲空，然後插入使用div後after

success:function(html){ 
$("#divSubGenre").after(html); 
}

所以你的最終代碼可能看起來像這樣

$(document).ready(function() { 
var idGenre = $("#txtGenre option:selected").val(); 
var html = $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: {id:idGenre}, 
      async: false, 
      success:function(html){ 
       $("#divSubGenre").append(html); 
      } 
      }); 

});

更新

$("#txtGenre").change(function(){ 
//get the update value here 
var idGenre = $("#txtGenre option:selected").val(); 
    $.ajax({ 
      type: "POST", 
      url: "GetSubGenreData.php", 
      data: {id:idGenre}, 
      async: false, 
      success:function(html){ 
       $("#divSubGenre").html(html); 
      } 
      }); 

});

jquery change

另一個更新 有關的評論顯示在頁面加載的結果，如果我瞭解的情況以及你可以有兩個div在頁面上像

<div id="divSubGenre"></div> 
<div id="divonLoad"></div>

在頁面加載上執行ajax調用並將結果附加到#divonLoad和success您的ajax調用回調中，該回調位於change事件處理函數內部，請執行此操作

success:function(html){ 
$("#divonLoad").fadeOut("slow").remove(); removes the div that was holding the result on page load 
$("#divSubGenre").html(html); 
}

來源

2011-07-20 12:42:51 Rafay

此外這一個工程。但我有同樣的問題。當idGenre更改HTML結果時不會更新。爲什麼？我需要一種方法來更新idGenre值更改的EVERYTIME結果。我怎麼做？感謝 –

從idGenere正在改變？它是一個下拉？或輸入字段？ – Rafay

它工作！謝謝！！！！ –

添加HTML dataType和success方法您的AJAX調用：

// No need to return the responseText as a variable 
updateSelectHtml = function() { 
    $.ajax({ 
    type: "POST", 
    url: "GetSubGenreData.php", 
    data: "id=" + idGenre, 
    async: false, 
    // Make sure the return is formatted as html 
    dataType: "html", 
    success: function(data) { 
     // The return HTML data is appended after the div. 
     $("#divSubGenre").html(data); 
    } 
}); 
}; 

// Bind the function to #txtGenre onchange 
$("#txtGenre").change(updateSelectHtml);

來源

2011-07-20 12:44:46

謝謝你的工作。但是每當價值idGenre發生變化時都應該發生。相反，它現在只發生在首頁加載。但是如果我改變idGenre的價值，它仍然是一樣的。每當idGenre值發生變化時，我該如何改變？ –

@DiegoP。請參閱上面的更改 - 整個ajax調用現在包裝在一個函數中，並且該函數綁定到'＃txtGenre'的onchange方法。 –

此函數寫入和寫入返回的HTML結果。 IT不更新以前的結果。它在前一個之後附加無限的結果。我該如何解決？ –

jQuery在Ajax調用後寫入元素

回答

相關問題