用 jquery $.post 响应替换页面

Question

我正在使用jquery的$.post，如下所示：

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

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

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

谢谢，

瑞

Answer 1

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

Answer 2

您可以使用：

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

Answer 3

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

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

Answer 4

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

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

问题始于 Chrome 浏览器，提交后不允许异步发布。我们有一个长期运行的流程，需要显示状态。因此，我们的状态跟踪器在提交发生时进行 asycn 调用，在大多数浏览器中工作，但最近在 Chrome 中停止工作。

- 一种解决方案是使用 iframe 并以这种方式调用其他服务器端代码。对我来说不是一个选择。

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

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

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

所以我基本上把 $(form).submit() 变成了 ajax post。但这在 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();
    };

Answer 5

我发现有效的是将表单动态附加到正文并在其之后立即提交。通过这种方式，您可以使用传统的帖子，而无需在页面上显示表单。

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