AJAX 加载页面并在成功后重新加载/添加答案

【问题标题】：AJAX load page and reload/add after successAJAX 加载页面并在成功后重新加载/添加
【发布时间】：2012-11-14 18:29:00
【问题描述】：

所以我有一个页面，当请求时，它会更新我的数据库。例如，当我转到database_update.php 时，它只会更新数据库并且不显示任何内容。

Index.php 显示用户数据库内容。

所以我在 JavaScript 中有一个名为 update 的函数，它必须使用 AJAX 来运行此页面，并且在页面加载后（在所有查询成功运行之后）它必须加载 index.php 并向用户显示更新的页面（重新加载页面没有刷新效果）。

我的代码是这样的：

$.get('ajax_update_table.php', {
    // The following is important because page saves to another table
    // users nick which call update:
    update: UserLogin
}, function (output) {
    // The following is unimportant:
    $(myDiv).html(output).show();
});

【问题讨论】：

您的问题具体是什么？
我也不确定您具体要做什么。您正在进行一个 ajax 调用，当完成后，您想要更新页面上的某些内容而不重新加载整个页面？
hmm，按步骤： #1 转到 index.php #2 单击调用函数 update_database 的链接 #3 在 update_database.php 中运行代码（使用 ajax 调用） #4 更新完成时（页面加载 100%）使用 ajax #5 加载 index.php 更改 pege 上的内容（步骤 #1，index.php）使用来自 ajax 的新值（新版本的 index.php）但没有可见的页面刷新（更像是追加JS，但删除旧数据并只显示新数据）希望现在更清楚:)

标签： javascript jquery ajax load

【解决方案1】：

两个建议：

从您的 database_update 脚本返回“成功”或“错误”代码。返回 JSON 字符串非常简单。例如：
```
echo '{"success":"success"}';
```

使用 $.ajax 函数。然后添加成功、错误和完成参数。当 AJAX 请求完成时，您可以调用任何 javascript 函数。

$.ajax({
    url: 'update_database.php',
    dataType: 'json',
    success: function (data) {successFunction(data)},
    error: function () { error(); },
    complete: function () { complete(); }
});

function successFunction(data) {
    if ('success' in data) {
        // Do success stuff here.
    } else {
        // Show errors here
    }
}
// .... etc

【讨论】：

对不起，代码格式不起作用.... ???对 StackOverflow 标记语言不满意。
好的，但是如何在 > if ('success' in data) 中加载整个页面（index.php），然后将其附加到实际页面（也是 index.php）
为什么不直接“刷新”页面？如果您已正确设置会话/cookie 值，则下次加载索引页面时，它可以显示新信息。您可以使用 javascript document.location.reload(true); 刷新功能。（true 导致它从服务器重新加载，而不是缓存）

【解决方案2】：

我可能遗漏了什么，但我会尽力回答您的问题。

我会设置一个空白页面，在加载它时将 index.php 发送到该页面上的一个 div。例如，制作一个标题为blank.php的页面。

blank.php 将具有以下内容：

function Index(){
$.ajax({
    url:"index.php",
    type: "GET",
    success:function(result){
        $("#web-content").html(result);
    }
});
}

<script type="text/javascript">Index();</script>
<div id="web-content"></div>

然后您将让您的索引执行 Index 函数以使用 index.php 数据更新 web-content div，而无需重新加载 blank.php 页面。

【讨论】：

【解决方案3】：

让它工作！

我的 index.php

<html>
<head>
    <script type="text/javascript" language="Javascript" SRC="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" language="Javascript">
    function update_and_replace()
        {
            $.ajax({
                url: 'ajax_update_table.php',
                dataType: 'json',
                success: function (data) {successFunction(data)},
                error: function () { error(); },
                complete: function () { complete(); }
            });
        }

        function successFunction(data) {
            if ('success' in data) {
                $("#content").load("index.php");
            } 
        }

    </script>
</head>
<body>
<div id='content'>
Now is: <?php echo date("Y-m-d, H:i:s");?>
<br/><br/><br/><br/>
<a href="javascript:void(0);" onClick="update_and_replace();">Aktualizuj</a>
</div>
</body>
</html>

Ajax_update_table.php

<?php echo '{"success":"success"}'; ?>

感谢大家的帮助。我知道我的英语不好，但在你的帮助下我做到了！

【讨论】：