ajax不跳转页面提交表单 水深无声 2022-02-23 19:20 279阅读 0赞 #### 一、普通表单 #### 1. 表单 <form action="/handleForm1" method="post"> name: <input type="text" name="name" /><br /> <input type="submit" value="Submit" /> </form> 1. ajax提交 $('form').submit(function (event) { event.preventDefault(); var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), success: function(data){ console.log(data); } }); }); 1. 处理请求 @RequestMapping("/handleForm1") @ResponseBody public String handleForm1(String name) { System.out.println(name); return "提交的是:"+name; } 1. 执行效果: ![在这里插入图片描述][20190408162808559.png] #### 二、文件上传表单 #### 1. 表单 <form action="/handleForm1" method="post"> name: <input type="text" name="name" /><br /> <input type="file" name="photo"><br /> <input type="submit" value="Submit" /> </form> 1. ajax提交 $('form').submit(function(event) { event.preventDefault(); var form = $(this); var formData = new FormData(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: formData, mimeType: "multipart/form-data", contentType: false, cache: false, processData: false, success: function(data) { console.log(data); } }); }); 1. 处理请求 @RequestMapping("/handleForm1") @ResponseBody public String handleForm1(String name, MultipartFile photo) { return "name:"+name+" photo 文件大小:"+photo.getSize(); } 1. 执行效果: ![在这里插入图片描述][20190408164924460.png] #### 三、多文件上传表单 #### 1. 表单修改 <input type="file" multiple name="photos"> 1. ajax提交 js同上 2. 处理请求 @RequestMapping("/handleForm1") @ResponseBody public String handleForm1(String name, MultipartFile[] photos) { return "name:"+name+" photo 文件个数:"+photos.length; } 1. 执行效果: ![在这里插入图片描述][20190408171813511.png] > 延伸阅读: > [Using\_XMLHttpRequest - 提交表单和上传文件][Using_XMLHttpRequest -] (AJAX Form Submit Framework) [20190408162808559.png]: /images/20220223/23bb883be6f04592b481eba34b49848a.png [20190408164924460.png]: /images/20220223/1bd8046ce45f44b4816e2c513ce39e25.png [20190408171813511.png]: /images/20220223/16f42acc25b34b9891982ecfe05dc027.png [Using_XMLHttpRequest -]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95%E5%92%8C%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6
还没有评论,来说两句吧...