使用 JQuery 提交两次表单答案

【问题标题】：twice Form submission using JQuery使用 JQuery 提交两次表单
【发布时间】：2018-10-28 07:35:14
【问题描述】：

我是 UI 新手，我们正在尝试使用 JQuery 实现 Web 调用，其中我们有一个奇怪的 webcall 问题，即当我们尝试进行 post http 调用时，我们在服务器访问日志中有观察者进行第一个 http post 调用，然后立即存在一个 http get 调用。

请在 .jsp 页面下方找到：

<html>

<head>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<%
    String urlVal = (String) request.getAttribute("dataURL");
%>
<%
    String emailID = (String) request.getAttribute("emailID") ;
%>

<script type="text/javascript">
var url="<%=urlVal%>";
alert(url);

     function navigateWithForm() {
        var form = $('<form></form>');
        form.attr({
            method: 'POST',

            action: url
        });
        form.append(getInput());
        form.appendTo('body').submit();

     }

     function getInput() {
         alert("<%=emailID%>");
        return $('<input type="hidden" />').attr({
            name: 'header',
            value: '<%=emailID%>'   
        });
    }

    $(document).ready(function() {
        navigateWithForm();
    });

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>

</head>


</html>

在后端，服务部署在 weblogic 中，它是在 spring 2.5 框架中设计的。我们有用于负载平衡的 apache 代理服务器。

任何帮助将不胜感激。

【问题讨论】：

你能解释一下到底是什么问题吗？您是说您看到的是get 请求，而不是post 请求？
查看浏览器的 Network 控制台。您可能必须启用 “保留日志” 选项，但您应该能够看到所有请求和响应。如果我不得不猜测，对您的 POST 请求的响应是带有 Location 标头的 302 / 303，从而导致立即 GET 请求。见en.wikipedia.org/wiki/Post/Redirect/Get
@Phil 因为我没有在 Jquery 中导航 url，所以它应该是 302 状态码。这是简单的发布表单，但表单会提交两次，一次获取并发布纠正我，如果我错了。
@Taplar 是的，在控制台日志中，我看到一个带有 302 http 响应的 post 表单提交，然后 http get 提交 500，因为服务器由于缺少表单数据而无法执行操作。跨度>
添加反对票不是问题，我希望添加反对票的人请告诉我错误。这对理解问题非常有帮助。

标签： javascript java jquery spring-2.5

【解决方案1】：

您问题中的代码没有什么特别的问题（除非您真的想使用 AJAX，但我觉得这是一个不同的问题）。

您的服务器端代码似乎实现了典型的Post/Redirect/Get 请求处理模式。

看起来正在发生的事情

Browser               |  Server
----------------------|-----------------------------
create form           |
  action=urlVal       |
  method=POST         |
                      |
submit form           |
  POST "urlVal" -------->
                      |
                      |  Process request
                      |
                    <--- Response
                      |    302 Found
                      |    Location: someUrl
                      |
GET "someUrl" ---------->
                      |
                    <--- Response
                      |    500 Internal Server Error

因此，您的服务器端代码添加到 302 Found 响应的 Location 标头的 URL 无法处理由该响应产生的 GET 请求。您需要修改服务器端代码以处理 GET 请求或使用不同的 Location 进行响应。

例如（Spring MVC），假设您的 urlVal 是 "/foo" 并且您有

@RequestMapping("/foo")
public String handleFoo(@RequestParam String header) {
    // process, etc
    return "redirect:/foo";
}

返回一个 redirect 响应告诉客户端（浏览器）通过响应标头执行GET 请求...

302 Found
Location: /foo

注意该方法如何需要header 请求参数。

浏览器将尝试通过 GET 请求 /foo，但由于没有带参数的请求正文（即没有 header）而失败。

解决办法是：

重定向到响应 GET 请求的现有 URL

处理 GET 对您要重定向到的 URL 的请求

@RequestMapping(path = "/foo", method = RequestMethod.GET)
public String getFoo() { // note, no required parameters
    // etc
}

或者，

以不同的方式回应。即使是空的响应也可以

@RequestMapping("/foo")
@ResponseBody
public ResponseEntity<Void> handleFoo(@RequestParam String header) {
    // process, etc
    return ResponseEntity.ok().build();
}

【讨论】：

纠正我，我写的jsp代码没有做任何重定向。作为相同的代码，我试图在本地环境中执行，我在 tomcat 中部署了 jsp 代码，在 weblogic 中部署了服务器代码，工作正常。 jsp 因集成环境而异。
@ramesh027 我只能看到您问题中的代码。您还没有包含处理 POST 请求的代码，所以我根本无法对此发表评论。你读过链接的维基百科文章了吗？
看来问题可能是这样的stackoverflow.com/questions/33936696/… 或stackoverflow.com/questions/14784053/… 或stackoverflow.com/questions/1256593/…。我对 UI 有点陌生，无法找到解决方案
@ramesh027 我再说一遍...... 你没有使用任何 AJAX。所以不，这些链接的问题根本不适用。我的回答中是否有您不清楚的地方？问题完全出在您的服务器端代码中
问题不在于服务器端代码，问题在于 url。传递的 url 是 Context:root?param1=value&param2=2 我们已经更改了 url，因为现在发生了多个调用

【解决方案2】：

经过几天的努力，我终于找到了问题的解决方案。这真的是一个很小的变化。希望该解决方案对正在努力解决该问题的其他人有用。实际问题在于 Jquery 调用的 url/action。

之前通过的网址

上下文：root?param1=value&param2=2

传递的正确网址是

上下文：root/?param1=value&param2=2。

感谢 Phil，我必须在其中查看请求和响应的标头以及其他信息，例如位置、来源和引荐来源

【讨论】：