如何使用 Ajax 在 div 中添加页面内容？答案

【问题标题】：How can I add the content of a page in a div with Ajax?如何使用 Ajax 在 div 中添加页面内容？
【发布时间】：2011-12-11 16:14:37
【问题描述】：

我的站点中有一个列表，当我单击每个列表项时，我希望它们旁边的 div 使用 ajax 重新加载，以免重新加载整个页面。

这是我的 javascript

  parameters = "category_id="+categoryId;
  var result = ajaxFunction("changeCategory.php", parameters);
  $("#mydiv").html(result);

ajaxFunction() 函数是常规的 $.ajax() jQuery 函数，带有“POST”。在“changeCategory.php”中，我调用包含另一个 php 文件。问题是整个页面被重新加载，而不仅仅是 div。我想使用我拥有的这个 ajax 函数，因为我想将数据发送到我的 php 文件。

有谁知道我应该怎么做才能只重新加载 div？

提前致谢

【问题讨论】：

代码在我看来没问题。如果您的 ajaxFunction() 调用 .ajax() 则不应重新加载页面。您单击的列表中的 HTML 元素是什么？
你尝试了什么 - 在这里提供一些代码 sn-p，你的函数 ajaxFunction() 包含什么。
向我们展示完整的 JS 代码（尤其是您要绑定的事件）
ajaxFunction 没问题，因为我也用到了其他部分，所以我不认为是这个问题？ HTML 元素是
，我在 "onClick" 中称这个 ajax。

【解决方案1】：

整个页面已重新加载，这意味着您的 javascript 代码中可能存在错误

再次检查或者试试这个

function name_of_your_function(id)
{   

var html =  $.ajax({
   type: "GET",
   url: "ajax_main_sectors.php",
   data: "sec="+id,
   async: false
  }).responseText;


    document.getElementById("your div id").innerHTML=html;
}

你可以使用get方法或post方法......

【讨论】：

【解决方案2】：

$(document).ready(function() {
    $.ajax({
        url: "right.php",
        type: "POST",
        data: {},
        cache: false,
        success: function (response) {

            $('#right_description').html(response);
        }
    });

});

【讨论】：

【解决方案3】：

尝试使用load 加载带有 url 内容的 div -

$("#mydiv").load("changeCategory.php", {category_id: "category_id_value"} );

您可以将数据传递给 url。

如果数据作为对象提供，则使用 POST 方法；否则，假定为 GET。

【讨论】：

【解决方案4】：

您可以向该 PHP 发送查询，以便它“理解”它只需要输出 div，如下所示：

在您的 javascript 中：

//add the query here
parameters = "category_id="+categoryId + "&type=divonly";
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);

在您的“changeCategory.php”中：

//add a query check:
$type = "";
if (isset($_POST['type'])) {
    $type = $_POST['type'];
}

//then, depending on the type, output only the div:
if($type === "divonly"){
   //output the div only;
} else {
   //your normal page
}

【讨论】：

@novellino 我可能误解了你的问题，似乎整个页面正在重新加载，我以为你的意思是你从 php 获得了一个“整个”页面，抱歉。如果你真的想只输出 div 的内容，那么在外部 php 的 if/then 子句中，放置类似 echo "<div>content</div> 的内容
啊好的。我会试试这个。虽然我意识到我的问题可能出在 div 中，但我试图添加 ajax 调用的结果，而不是 ajax 调用本身。谢谢

【解决方案5】：

试试这个

$(document).ready(function(){
    var parameters = {category_id:categoryId};
    $.ajax({
        url:'changeCategory.php',
        type:'post',
        data:parameters,
        dataType:'html',
        success:function(result){
            $("#mydiv").html(result);
        },
        error:function(){
            alert('Error in loading [itemid]...');
        }
    });

});

还要验证在您的点击事件中是否写入此行 return false; 这是必需的。

【讨论】：

这实际上是我在 ajaxFunction() 中所做的。
@novellino 我知道，但你有没有注意返回 false；这停止你的页面重定向基本上阻止了默认事件。
好的，谢谢您的回复。我还添加了 return false 但不起作用。我只是意识到，只要错误不在 ajax 调用中，我尝试添加结果的 div 中可能有问题。非常感谢。