twice Form submission using JQuery

Question

I am novice in the UI, we are trying to implement a web call using a JQuery where we are have observer a strange issue of webcall i.e, when we are trying to do a post http call we have observer in server access logs first http post call is made and then immediately one http get call exist.

Please find below the .jsp page:

<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>

In the backend the service are deployed in weblogic and it is designed in the spring 2.5 framework. We have apache proxy server for load balancing.

Any help will be appreciated.

Can you please explain what exactly the issue is? Are you saying you are seeing a `get` request, rather than a `post` request? — Taplar, May 17 '18 at 22:52
Look in your browser's _Network_ console. You may have to enable the _"Preserve log"_ option but you should be able to see all the requests and responses. If I had to guess, the response to your POST request is a 302 / 303 with a `Location` header, resulting in an immediate GET request. See https://en.wikipedia.org/wiki/Post/Redirect/Get — Phil, May 17 '18 at 23:04
@Phil Since i am not navigating the url in Jquery, then it should 302 status code. it is simple posting form but the form is getting submit twice with one get and post correct me if i am wrong. — ramesh027, May 22 '18 at 21:48
@Taplar Yes in the console log i am seeing a post form submission with 302 http response then http get submission with 500 since the server unable to perform the operation due to lack of the form data. — ramesh027, May 22 '18 at 21:50
Adding a negative vote is not problem and i wish whoever is adding negative please let me know the mistake. which is really helpful to understand the issue. — ramesh027, May 22 '18 at 22:27
@ramesh027 did you read the Wikipedia article I linked above about _PRG_? Sounds like your server-side code at the `urlVal` URL is trying to get the client (browser) to redirect to a URL that it simply cannot handle, hence the 500 status. There's absolutely no problem with the code in your question; it's working as required to create a `
` and submit it. — Phil, May 22 '18 at 23:06
Why is this tagged with [tag:ajax]? There is no AJAX in your code but it now begs the question; is there meant to be any? — Phil, May 22 '18 at 23:07
@phil Just for the attention of the people i have added the tag — ramesh027, May 22 '18 at 23:25
@phil I have the test the server side code with postman http post call with hidden form and it is not submitting twice (http post + http get). — ramesh027, May 22 '18 at 23:27
@ramesh027 Postman will not follow a `Location` header but a browser will — Phil, May 22 '18 at 23:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171583/discussion-between-ramesh027-and-phil). — ramesh027, May 22 '18 at 23:39

Phil · Answer 1 · 2018-05-23T00:02:24.410

There is nothing particularly wrong with the code in your question (unless you actually wanted to use AJAX but I feel that's a different problem).

Your server-side code seems to be implementing a typical Post/Redirect/Get request handling pattern.

Here's what appears to be happening

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

So the URL your server-side code is adding to the 302 Found response's Location header, is not capable of handling the GET request resulting from that response. You'll need to modify your server-side code to either handle the GET request or respond with a different Location that can.

For example (Spring MVC), say your urlVal is "/foo" and you have

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

Returning a redirect response like that tells the client (browser) to perform a GET request via the response headers...

302 Found
Location: /foo

Notice how the method requires the header request parameter.

The browser will attempt to request /foo via GET which will fail because there is no request body with parameters (ie, no header).

The solution is to either:

Redirect to an existing URL that responds to GET requests

Handle GET requests for the URL you are redirecting to

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

or,

Respond in a different way. Even an empty response is fine

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

correct me, the jsp code which i have written is not doing any redirection right. as the same code i am trying to execute in local environment where i deployed the jsp code in tomcat and server code in weblogic working fine. The jsp varies in the integration enviroment. — ramesh027, May 22 '18 at 23:31
@ramesh027 I can only see the code in your question. You have not included the code that handles the POST request so I cannot comment on that at all. Have you read the linked Wikipedia article yet? — Phil, May 22 '18 at 23:34
it seems like the issue may be like this https://stackoverflow.com/questions/33936696/form-submitting-twice-via-ajax-post or https://stackoverflow.com/questions/14784053/why-does-jquery-submit-my-ajax-form-twice or https://stackoverflow.com/questions/1256593/why-am-i-getting-an-options-request-instead-of-a-get-request. i am little bit new to the UI not able to find a solution — ramesh027, May 22 '18 at 23:35
@ramesh027 I'll say it again... **you are not using any AJAX**. So **no**, none of those linked questions apply at all. Is there anything in my answer that is unclear for you? The problem is entirely in your server-side code — Phil, May 22 '18 at 23:37
the issue not with the server side code, the issue is with url. The url passed was Context:root?param1=value&param2=2 we have changed the url because of which now multiple call are happening — ramesh027, May 24 '18 at 17:08

score 0 · Accepted Answer · answered May 24 '18 at 17:19

Finally after many days struggle, i have found out the solution of the issue. which is really a small change. Hope the solution will be useful for the someone else who are struggling with the issue. Actual issue is with the url/action of the Jquery call.

URL passed earlier

Context:root?param1=value&param2=2

Correct URL passed is

Context:root/?param1=value&param2=2.

Thanks to Phil where i have to see the header of the request and response and other such as location, origin and referrer

twice Form submission using JQuery

2 Answers2