Ajax提交form表单

1.编写form提交页面

 1 <h1>ajax方式提交表单数据</h1>
 2 <form id="produce-form" name="produce-form" style="text-align: center" action="##" onsubmit="return false">
 3     <table style="text-align: center" border="1">
 4         <tr>
 5             <td>测试数据</td>
 6             <td><input type="text" id="testData" name="testData" required></td>
 7         </tr>
 8         <tr>
 9             <td colspan="2"><input type="button" onclick="addForm()" value="提交"></td>
10         </tr>
11     </table>
12 </form>

 

2.js

 1 function addForm() {
 2     $.ajax({
 3         url: "/formtest/addFormAjax"
 4         , type: "post"
 5         , dataType: "json"
 6         // , data: $("#produce-form").serialize()
 7         , data: {
 8             testData: $("#testData").val()
 9         }
10         , success: function (result) {
11         }
12         , error: function () {
13         }
14     });
15 }

3.Controller

1 @Controller
2 public class FormController {
3     @ResponseBody
4     @PostMapping("addFormAjax")
5     public String addFormAjax(String testData) {
6         System.out.println("testData==" + testData);
7         return "200";
8     }
9 }

 

posted @ 2020-06-26 21:43  一缕暖阳  阅读(562)  评论(0)  编辑  收藏  举报