6 ways to submit form

1. Submit the form without refreshing the page

The form can be submitted without refreshing the page, no page jump is required, as follows, through a hidden iframe, the target of the form is set to the name of the iframe, and the target of the
form submission is the current page iframe will not refresh the page

<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>   
<iframe name="targetIfr" style="display:none"></iframe> 

2. Submit via type=submit

Generally, form submission is realized by type=submit, input type="submit", the browser displays as a button button, by clicking this button to submit the form data and jump to /url.do

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>
              

3.js submit form

js event triggers form submission, trigger events through buttons, links, etc., js calls submit() method to submit form data, jquery uses submit() method

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>

js: document.getElementById("form").submit();
jquery: $("#form").submit();

4. Ajax submits form data asynchronously

Using the ajax asynchronous method, obtain the values ​​of all input, select and other components in the form through js, compose these values ​​into a Json format, and interact with the server in an asynchronous manner.
Generally, the form data is transmitted to the server, and the server processes the data and Return result information, etc.

<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>
  var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
      }
   });
       

5. No page jump

If you submit a request to the server to download the file through the form form, then the current page will not jump, the server returns void, and the file data is written through the response, and the
page will display the downloaded file.

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

@RequestMapping(value = "/url")
    public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)
            throws Exception {
        OutputStream out = null;
        try {
            String rptName = "file";
            String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),
                    "8859_1");
            response.reset();
            response.setContentType("application/octec-stream");
            response.setHeader("Content-disposition", "attachment; filename=" + fileName);
            out = response.getOutputStream();
            excelAble.exportFile(out);
        } catch (Exception e) {
            logger.error(e);
        } finally {
            if (out != null) {
                out.close();
            }
        }
    }
         

6. Form form upload file.
Use the form form to upload the file. You need to add enctype="multipart/form-data" attribute to the form. In addition, you need to change the form submission method to post,
as follows method="post", input The type of type needs to be set to file

<form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="submit" value="提交">
   </form>