简体   繁体   English

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

[英]AJAX load page and reload/add after success

So I have a page which, when requested, updates my database. 因此,我有一个页面,该页面可应要求更新我的数据库。 For example when I go to database_update.php it just updates the database and doesn't show anything. 例如,当我转到database_update.php它只会更新数据库,而不会显示任何内容。

Index.php shows user database content. Index.php显示用户数据库内容。

So I have function in JavaScript called update which must use AJAX to run this page and after the page loads (after all queries run successfully) it must load index.php and show updated page to the user (reload the page without refresh effect). 因此,我在JavaScript中具有称为update函数,该函数必须使用AJAX来运行此页面,并且在页面加载后(所有查询成功运行之后),它必须加载index.php并向用户显示更新的页面(重新加载页面,而不会产生刷新效果)。

My code is like: 我的代码是这样的:

$.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();
});

Two suggestions: 两个建议:

  1. Return a "success" or "error" code from your database_update script. 从您的database_update脚本返回“成功”或“错误”代码。 Returning a JSON string is very easy. 返回JSON字符串非常简单。 For example: 例如:

     echo '{"success":"success"}'; 
  2. Use the $.ajax function. 使用$ .ajax函数。 Then add the success, error, and complete parameters. 然后添加成功,错误和完整参数。 You can call any javascript function(s) when the AJAX request is complete. 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 

I might be missing something, but I'll try to answer your question. 我可能会丢失一些东西,但我会尽力回答您的问题。

I would setup a blank page that on loading it sends the index.php to a div on that page. 我会设置一个空白页,在加载时将其发送index.php到该页上的div。 For example, make a page titled blank.php. 例如,制作一个标题为blank.php的页面。

blank.php would have the following: 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>

You would then have your index execute the Index function to update the web-content div with the index.php data without reloading the blank.php page. 然后,您可以让索引执行Index函数,以使用index.php数据更新Web内容div,而无需重新加载blank.php页面。

Got it to work! 得到它的工作!

my index.php 我的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 Ajax_update_table.php

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

Thank You all for your help. 谢谢大家的帮助。 I know that my English is bad but with your help I made it! 我知道我的英语不好,但是在你的帮助下我做到了!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM