jquery：POST数据+重定向页面不按预期方式工作

问题描述：

我想使用POST方法提交一些数据并重定向页面。但是，无论何时点击提交按钮，jquery都无法在新页面上正确加载。我能够将我的问题减少到以下代码。例如，如果我按提交，新的页面被加载。但提交按钮不会给出任何响应，并且不会出现警告框。jquery：POST数据+重定向页面不按预期方式工作

<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("https://stackoverflow.com/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。我很难过。

答

你不能像这样重新载入<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 2010-10-16 11:12:11

@Neo - 然后我会阻止提交事件，直到通过附加'.submit（）'处理程序到'

好的，回到帖子表格。 – Neo 2010-10-16 11:23:23

答

你没有重定向到一个页面，你使用javascript使用AJAX另一个页面获取文本/ HTML后更换<html>和</html>标签之间的一切。

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

为什么事情似乎当你更换<body>里面的内容，以工作的原因是因为你的脚本是在被替换当您使用html

究竟是你试图做<head>标签<body>外？也许详细解释场景可以帮助我们更好地帮助你。表单POST后需要发生什么？

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

实际上，我试图用一些jQuery代码替换一个html表单（称之为模拟ajax中的html表单）。原因是我应该使用另一个按钮来进行一些自定义的服务器端验证，只有这样才允许提交。 – Neo 2010-10-16 11:14:50

这不是真的准确，它取决于浏览器，你看到什么来源。 – 2010-10-16 11:16:53

@Nick，哪些浏览器是例外？假设有，更新了我的答案。 – 2010-10-16 11:20:02

答

在按钮点击调用这个函数（）下方，并通过参数时，在我的情况下，我通过了新的与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();

jquery：POST数据+重定向页面不按预期方式工作

相关推荐