如何在不刷新整个页面的情况下重新加载一个div？

Question

我想对于大多数人来说，我的问题非常简单。我想重新加载一个div而不用重新加载整个页面。最佳方法是什么？

<div class="black_text" id="cp_in_content_div">
<?php
$id = $_GET["id"];
$result = mysql_query("SELECT * FROM Setting WHERE ID = $id");
$row = mysql_fetch_array($result);
switch ($_GET["action"])
{
    case "delete":
    if (!unlink("$_SERVER[DOCUMENT_ROOT]setting/$row[Filename]"))
    {
        echo "Error.";
        header("Refresh: 2.5; URL=delete_setting.php?id=$id");
        exit();
    }
    if (!mysql_query("DELETE FROM Setting WHERE ID = $id"))
    {
        echo "Error.";
        header("Refresh: 2.5; URL=delete_setting.php?id=$id");
        exit();
    }
    else
    {
        echo "Ok!";
        header("Refresh: 1.25; URL=index.php");
    }
    break;
    default:
    echo "form";
}
?>
</div>

我需要那些header("Refresh:...")只重新加载div而不是整个页面。

- Gabriele

---

欢迎来到SO @Gabriele！你能编辑问题并提供你正在处理的代码吗？ - Jason Gennaro

@jas: 我觉得他没有写代码 :) - genesis

Answer 1

jQuery.load()可能是使用选择器异步加载数据最简单的方式，但你也可以使用任何 jQuery 的 ajax 方法（如 get、post、getJSON、ajax 等）。

请注意load允许你使用选择器来指定要加载的脚本的哪个部分，例如：

$("#mydiv").load(location.href + " #mydiv");

请注意，这实际上会加载整个页面，而jQuery会删除除您选择的内容以外的所有内容，但这一切都是在内部完成的。

- Explosion Pills

---

如何在整个div加载完成之前显示“loader.gif”。因为我的div非常大且来自文件。所以需要大约2秒钟的时间。 如何在jQuery完成任务之前显示类似“loading...”的内容。 - ajinzrathod

有没有按标签而不是ID加载的选项？ - Yasmine

@Yasmine，您可以使用任何有效的选择器，甚至$("div").load也可以，但请记住，这将选择页面上的所有div并触发加载。 - Explosion Pills

Answer 2

$("#div_element").load('script.php');

演示: http://sandbox.phpcode.eu/g/2ecbe/3

完整代码:

<div id="submit">ajax</div> 
<div id="div_element"></div> 
<script> 
$('#submit').click(function(event){ 
   $("#div_element").load('script.php?html=some_arguments');  

}); 
</script> 

- genesis

Answer 3

请使用这个。

$('#mydiv').load(document.URL +  ' #mydiv');

请注意，在井号前加一个空格。

结果：

请注意，在井号前加一个空格。

- praveena

---

我可以使用标签而不是ID来调用它吗!!? - Yasmine

Answer 4

写一个按钮标签和点击函数。

var x = document.getElementById('codeRefer').innerHTML;
  document.getElementById('codeRefer').innerHTML = x;

将这一切写在onclick函数中。

- Ambala Chandrashekar

---

嗨，我尝试使用这个来更新表格。但是似乎表格仍然与之前相同。表格数据没有更新，即使新数据已添加到表格中。@Ambala Chandrashekar - Rubel