jquery：POST数据+重定向页面未按预期工作答案

【问题标题】：jquery: POST data + redirect page not working as expectedjquery：POST数据+重定向页面未按预期工作
【发布时间】：2010-10-16 11:04:36
【问题描述】：

我正在尝试使用 POST 方法提交一些数据并重定向页面。但是每当我单击提交按钮时，jquery 都不会在新页面上正确加载。我能够将我的问题减少到以下代码。例如，如果我按下提交，则会加载一个新页面。但是提交按钮没有给出任何响应，并且没有出现警告框。

<html lang="en">
<head>
<script type="text/javascript" src="{{ MEDIA_URL }}site/jquery-1.4.2.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
  $('#submit').click( function() {
  alert("Submit button pressed" );
  $.post("/questions/submit/", 
    {qid:1, ans:"dummy" },
    function(data) {
       $('html').html(data);
    });
  });
});
</script>
</head>
<body>
    <a href="/accounts/logout">Logout</a>
    {{ section.qid }}
    <button id="submit">Submit</button> 
</body>
</html>

显然，每当通过 jquery 将新数据加载到页面中时，jquery 脚本和函数都不会执行。所以我必须在页面上进行“刷新”，一切正常。但是，在 post 函数中，如果我将 'html' 更改为 'body'，提交就可以了。

$('body').html(data);

但不同的页面可能包含不同的脚本文件。所以我不赞成这样做。实现这一点的理想方法应该是什么，以便正确加载 jquery 函数？

PS：在检查“页面源”时，我注意到旧的 section.qid 存在于页面源中。但是，浏览器会呈现新的（并且显然是正确的）section.qid。我难住了。

【问题讨论】：

标签： jquery redirect

【解决方案1】：

您不能像这样重新加载<html> 的全部内容...无论如何您都在刷新整个页面（有点违背AJAX 的观点），为什么不使用普通的<form> 和回发？它看起来像这样：

<html lang="en">
  <head></head>
  <body>
    <a href="/accounts/logout">Logout</a>
    {{ section.qid }}
    <form method="post">
      <input type="hidden" name="qid" value="1" />
      <input type="hidden" name="ans" value="dummy" />
      <button id="submit">Submit</button> 
    </form>
  </body>
</html>

【讨论】：

我希望它很简单。我写的代码是高度简化的形式。在实际问题中，只有在使用另一个按钮自定义验证答案后，才允许用户提交。（客户要求：））。所以基本上是的，我正在尝试用 jquery 代码模拟“post+form+submit”html。有出路吗？
@Neo - 然后我会阻止提交事件，直到通过将.submit() 处理程序附加到<form> 来按下/验证该按钮，但不编写您自己一直在工作的回发行为几十年:)

【解决方案2】：

您还没有重定向到页面，在使用 AJAX 从另一个页面获取文本/html 后，您正在使用 javascript 替换 <html> 和 </html> 标记之间的所有内容。

浏览器视图源通常会显示页面首次加载时的原始源。之后您所做的任何更改都不会在此处反映出来。如果您使用像 Firefox 的 Firebug 或 IE 的 Firebug Lite 这样的工具，您可以看到您对页面上的元素所做的更改。

当您替换 <body> 内的内容时，事情似乎可以正常工作的原因是因为您的脚本位于 <head> 标记中的 <body> 之外，当您使用 html 时，该标记会被替换

你到底想做什么？也许详细解释场景可以帮助我们更好地帮助您。表单 POST 后需要做什么？

AJAX 一般用于避免刷新整个页面，或整个内容，而是只刷新页面上需要更改的元素。

【讨论】：

实际上我正在尝试用一些 jquery 代码替换一个 html 表单，（称之为在 ajax 中模拟 html 发布表单）。原因是我应该使用另一个按钮进行一些自定义服务器端验证，然后才允许提交。
这不是很准确，它取决于浏览器您所看到的来源。
@Nick，哪些浏览器是例外？假设有，所以更新了我的答案。
@Neo：您需要确定页面上的哪些元素需要更新、验证后和发布后。另外，用 jQuery 代码替换 HTML <form> 是什么意思？我认为您正在尝试用 ajax POST 替换常规形式 POST。我认为我们需要看到更多细节和更大的图景。客户究竟希望看到什么？什么是复杂的服务器端验证？

【解决方案3】：

点击按钮调用下面的这个函数（）并传递参数，在我的例子中，我将 new 传递给 servlet

函数 checkforNew(){

            jQuery.ajax({
                type: "POST",
                url: '<%=request.getContextPath()%>/MyController?&oper=new',
                //data: {'obj':data},
                dataType: "json",
                success: function(response){
                    window.location.href = response.redirect;
                }
            });
        }

在 servlet 内部，您需要提及以下代码，以便页面重定向。

字符串目的地 = "/mypage.jsp;

            response.setContentType("application/json");
            JSONObject responsedata = new JSONObject();
            responsedata.put("redirect", destination);

            out.print(responsedata);
            out.flush();

【讨论】：