用 jquery $.post 响应替换页面答案

【问题标题】：replace page with jquery $.post response用 jquery $.post 响应替换页面
【发布时间】：2009-12-11 19:23:10
【问题描述】：

我正在像这样使用 jquery 的 $.post：

$.post("/searchresult", $("#searchDiv").serialize(), function(data) { //??? });

“data”参数有我想要的结果页的所有html代码。

问题是如何用 $.post 函数返回的内容替换当前页面的内容。

谢谢，

瑞

【问题讨论】：

如果要替换整个页面，为什么不使用传统帖子？
替换当前页面还是替换当前页面中的某个元素内容？
我想替换整个页面，因为发布结果是整个页面代码。我不能使用传统的帖子，因为要做到这一点，我需要在同一页面上使用 2 个 html 表单，而且我有一些限制（umbraco + SimpleModal），我不能这样做。

标签： jquery post response

【解决方案1】：

$('body').html(data); 应该这样做。

【讨论】：

我之前已经尝试过，但是帖子的结果是整个页面，而不仅仅是正文部分。我无法控制结果，因为这是对第三方代码的调用。
他们可能会尝试类似$('html').html(data);。

【解决方案2】：

你可以使用：

$('body').load("/searchresult", { data : $("#searchDiv").serialize() }, callBackFunction);

【讨论】：

【解决方案3】：

我已经通过多个 ajax 调用来完成此操作，以使用 $('body').empty() 和几个 $('body').appendTo(...) 重新填充页面

假设您可以安排您的网络服务单独返回正文的 innerHtml（而不是整个 html 文档），我认为 $('body').html(data) 应该可以工作。如果没有，我会考虑使用 IFRAME 加载正文，该 IFRAME 是 src 的那个 url.. 或类似的

【讨论】：

【解决方案4】：

回答有点晚了，但这看起来是为您遇到的类似问题添加我的解决方案的最佳位置。

有类似的情况，需要使用 .ajax POST html 响应，它包含错误消息。

从 Chrome 浏览器开始的问题，在提交后不允许异步发布。我们有一个长期运行的过程，需要显示状态。因此，我们的状态跟踪器在提交过程中进行了异步调用，在大多数浏览器中都可以正常工作，但最近在 chrome 中停止工作了。

-一种解决方案是使用 iframe 并以这种方式调用其他服务器端代码。不适合我。

-或者更改服务器端代码以返回 json 并以这种方式处理内容，更多的工作是重写已经到位的客户端和服务器代码。

我在提交帖子并处理 Html 响应时尝试解决 Chrome 的异步调用问题。这是我想出的，并且似乎正在工作。

去了这么多网站，获得了这么多的想法和知识，我不能直接归功于任何人。

所以我基本上把 $(form).submit() 变成了一个 ajax 帖子。但这在 chrome 和其他试图处理返回的 html 响应的浏览器中仍然存在问题。最大的问题是重新连接按钮事件和 javascript。

希望这会对某人有所帮助。

        if (IsChrome()) {
            $.ajax({
                type: 'POST',
                url: oo.url,
                data: oo.data,       // serialized form  $(form).serialize(); althought .serializeArray() also seems to work here.
                dataType: "html",
                cache: false,
                async: true,
                success: function (result, status, xhr) { HandleChromePostAlreadySubmittedSuccess(result, status, xhr); },   // this being the most important one to handle.
                error: function (jqXHR, textStatus, errorThrown) { HandlePostAlreadySubmittedError(jqXHR, textStatus, errorThrown); },
                complete: function (jqXHR, textStatus) { HandlePostAlreadySubmittedComplete(jqXHR, textStatus); }
            });
        } else {
            // will POST(even though load is for GETs). 
            // Chrome does not like the hack way. not sure why, the async status calls stop firing.

        // IMPORTANT use .serializeArray() below - will force a POST instead of a GET.

         // be careful using the jq LIVE on the submit button, may cause multi events to fire.
        // The Complete func below, was not really needed(mines an empty func), unlike the chrome above.
            $.load(oo.url, $(form).serializeArray(), function (responseText, textStatus, XMLHttpRequest) { HandlePostAlreadySubmittedComplete(XMLHttpRequest, textStatus); });
        }



    HandleChromePostAlreadySubmittedSuccess = function (result, status, xhr) {
            // Chrome - this is suppose to be the correct way.
            // Other browsers decided to program write and close a different way, causing the page to unload, from what i understand.
            document.write(result);
            document.close();
    };

【讨论】：

【解决方案5】：

我发现有效的是表单被动态附加到正文并在它之后立即提交。这样您就可以利用传统的帖子，而无需在页面上显示表单。

var url = 'action.php';
var form = $('<form action="'+url+'" method="post" />');
$('body').append(form);
form.submit();

【讨论】：