Php 根据Ajax请求更新整个页面_Php_Javascript_Jquery_Ajax_Http

Php 根据Ajax请求更新整个页面

php javascript jquery ajax http

Php 根据Ajax请求更新整个页面,php,javascript,jquery,ajax,http,Php,Javascript,Jquery,Ajax,Http,我有一个AJAX请求，它可能有两种结果：服务器响应一条消息，我应该将其放入服务器用一个HTML页面响应，在这种情况下，我需要用一个新页面替换当前页面并更改地址（客户端在请求之前知道地址）如果我有需要处理这两种情况的AJAX请求，那么解决方案是什么 url = "http://example.com" ajax.request(callback) function callback(response) { if (case2(response)) {

我有一个AJAX请求，它可能有两种结果：

服务器响应一条消息，我应该将其放入

服务器用一个HTML页面响应，在这种情况下，我需要用一个新页面替换当前页面并更改地址（客户端在请求之前知道地址）如果我有需要处理这两种情况的AJAX请求，那么解决方案是什么

 url = "http://example.com"
 ajax.request(callback)

 function callback(response) {
     if (case2(response)) {
           history.pushState({}, "New page", url);
           document.innerHTML = response
     } else {
            updateDiv(response)
     }
 }

我感兴趣的是实现第一个分支的正确方法，或者服务器是否能够以某种方式编写一个头文件，使浏览器能够像通常的HTTP响应一样处理响应，并更新页面位置和内容，比如使用给定内容重定向

我知道服务器可以返回一个链接而不是页面，但是在这种情况下，客户端需要一个额外的阶段-重定向，然后在服务器上填充新页面。

我曾经遇到过类似的问题。返回了完整的错误页，而不是简单的HTML片段。我们最终通过改变逻辑解决了这个问题，但以下是我找到的解决方案之一：

document.open();
document.write(responseText);
document.close();

$.ajax({
    type: 'POST',
    url: "/test.php",
    data: {ajax : true},
    dataType: "json",
    success: function( json) {
        if( json.redirect) {
            if( json.load_html) {   
                // If the History API is available  
                if( !(typeof history.pushState === 'undefined')) {
                    history.pushState( 
                        { url: redirect_url, title: document.title}, 
                        document.title, // Can also use json.title to set previous page title on server
                        redirect_url
                    );
                }
                // Output the HTML
                document.open();
                document.write( json.html);
                document.close();
            }
            else {
                window.location = redirect_url;
            }
        }
        else {
            $('#message').html( json.message);
        }
    },
});

我们放弃这个的原因是IE出现了一些问题。我没有抽出任何时间来调查原因，但在尝试写入字符串时，它抛出了一个“拒绝访问”异常。我想有一些

标签混淆了IE，或者可能是条件注释，我不确定。（当我使用一些简单的页面时，它起作用了…）

底线是：您不应该这样做，但是如果没有其他可以做的事情（比如返回url字符串），上面的代码可能会工作

坦率地说，我认为这种方法基本上被设计打破了。你不应该在那个地方做那个决定。例如，ajax响应只能表示应该加载整个新页面，然后在向新URL发出第二个（非ajax）请求时生成新内容

如果您被迫采取您已经采取的方式，并且提供的响应内容不是很大，您可以尝试Javascript URI。基本上，

javascript：“string”

形式的URI将加载一个新页面，该页面的源代码就是该字符串。因此，如果

response

已经是一个字符串，只需将

javascript:response

分配给

window.location.href

就足够了。也许你得事先逃走。我不知道，这种方法的跨浏览器兼容性如何

<a href="javascript:response">load</a>

当然，这将生成相当大的URI。地址栏中总是有Javascript URI

更新

类似的方法是在数据URI中使用base64编码。说明了它的工作原理，包括一个javascript示例。但是，您必须以某种方式修改内容。（注意：您可以使用带base64编码或不带base64编码的数据URI。您必须了解是什么为您的特定内容提供了较短的URI。）

如果响应是有效的XML，则非常简单

var new_doc = (new DOMParser).parseFromString(response, "application/xml");
document.replaceChild(document.adoptNode(new_doc.doctype), document.doctype);
document.replaceChild(document.adoptNode(new_doc.documentElement), document.documentElement);

由于请求的是更新后的答案，下面是我使用HTML5的解决方案。通过将PHP和HTML部分合并到一个文件中，它应该可以轻松运行

我的解决方案允许AJAX返回以下内容：

通过AJAX发送的消息，该消息更新

容器

导致浏览器重定向到URL的URL

一个完整的HTML页面，它调用历史API的

History.pushState（）

，将当前URL添加到浏览器的历史记录中，并用AJAX返回的HTML替换页面上的整个HTML

PHP 这只是通过AJAX调用PHP脚本时需要返回的内容的一个示例。它展示了如何对标志进行编码，以确定AJAX调用是应该更新容器还是加载新页面，以及如何通过JSON返回结果。为了完整性，我将这个脚本命名为test.php

<?php
// Random messages to return
$messages = array(
    'Stack Overflow',
    'Error Message',
    'Testing'
);

// If the page was requested via AJAX
if( isset( $_POST['ajax']))
{
    $response = array(
        'redirect' => // Flag to redirect
            ( rand() % 2 == 0) ? true : false, 
        'load_html' => // Flag to load HTML or do URL redirect
            ( rand() % 2 == 0) ? true : false,
        'html' => // Returned HTML
            '<html><head><title>AJAX Loaded Title</title></head><body>It works!</body></html>',
        'title' => 'History API previous title',
        'message' => // Random message
            $messages[ (rand() % count( $messages)) ]
    );
    echo json_encode( $response);
    exit;
}

HTML 这是我测试文件的完整HTML源代码。我在FF4-FF8中测试了它。请注意，jQuery提供了

ready

方法来防止JS在加载DOM之前执行。我还使用了Google托管的jQuery，所以您不需要将jQuery的副本上传到服务器上进行测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <title>Default Page</title>

    <script type="text/javascript"">        
        $( document).ready( function() {
            $('#ajax_link').click(  function() {
                var redirect_url = "/test.php";
                $.ajax({
                    type: 'POST',
                    url: "/test.php",
                    data: {ajax : true},
                    dataType: "json",
                    success: function( json) {
                        if( json.redirect) {
                            if( json.load_html) {   
                                // If the History API is available  
                                if( !(typeof history.pushState === 'undefined')) {
                                    history.pushState( 
                                        { url: redirect_url, title: document.title}, 
                                        document.title, // Can also use json.title to set previous page title on server
                                        redirect_url
                                    );
                                }
                                document.open();
                                document.write( json.html);
                                document.close();
                            }
                            else {
                                window.location = redirect_url;
                            }
                        }
                        else {
                            $('#message').html( json.message);
                        }
                    },
                });
            })
        });
    </script>
</head>

<body>
    <div id="message">The default contents of the message</div>
    <a id="ajax_link" href="#">Fire AJAX</a>

</body>
</html>


默认页
正如T-Bull所说。。。这里的整个过程都是错误的
你只是把事情复杂化了，你知道事实上：
我知道服务器可以返回链接而不是页面，但是
在这种情况下，客户机将需要一个附加阶段-
重定向，然后在服务器上填充新页面
$.ajax({
    type: 'POST',
    url: "/test.php",
    data: {ajax : true},
    dataType: "json",
    success: function( json) {
        if( json.redirect) {
            if( json.load_html) {   
                // If the History API is available  
                if( !(typeof history.pushState === 'undefined')) {
                    history.pushState( 
                        { url: redirect_url, title: document.title}, 
                        document.title, // Can also use json.title to set previous page title on server
                        redirect_url
                    );
                }
                // Output the HTML
                document.open();
                document.write( json.html);
                document.close();
            }
            else {
                window.location = redirect_url;
            }
        }
        else {
            $('#message').html( json.message);
        }
    },
});

别再让事情复杂化了，开始把它做好
客户端第一次打开页面，因此，跟踪它$\u SESSION['tmp\u Client\u id']='Client\u'.SESSION\u id（）会更好，不管怎样，将内容放入临时表或另一个会话变量中，等等
客户填写表格
客户提交表格
提出AJAX请求
将$\u POST
变量存储在tmp\u client\u tbl
中，使用其唯一的tmp\u client\u id
或仅$\u SESSION['client'.SESSION\u id（）]=json\u encode（$\u POST）

结果#1？在
结果#2？刷新页面并检查if（isset（$\u SESSION['client'.SESSION\u id（）]）{
如果是，让我们用填充的字段再次显示表单：}否则{
显示空表单
SELECT*FROM tmp_client_tbl，其中tmp_client_id='{$_SESSION['tmp_client_id']}
或json_decode（$_SESSION['client_'.SESSION_id（））；
$form\u data=$mysql\u rows；
或$json\u array；
foreach（$name=>$value形式的数据）{echo”“}
以一种忍者的方式，假设您有这样一种表单生成器数组，其中$form=array（'text'=>array（'name'，'lastname'），'select'=>array（'countries'），…）
，或者简单地通过将字段值预处理为
 $.ajax({
      url:'myAjax.php',
      data:{datakey:datavalue},
      dataType:"JSON",
      success: function (response) {
           if(response.message=="your message")
           {
             $('#message').html(response.content);
           }
           else
           {
             $('#page').html(response.content);   
           }
      }
     });