Question

你好我有一个jQuery函数，它会向php文件发送一些信息。 PHP文件将执行它应该执行的操作，并将生成一些HTML代码。我很好，直到这里。

问题在于，我必须获取此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文件GetSubGenreData.php获取的HTML结果更新的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结果的函数。

谢谢！

Answer 1

成功回调

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);
}

Answer 2

在您的AJAX调用中添加HTML dataType和success方法：

// 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);

在Ajax调用之后jQuery写元素

2 个答案: