一、前言:
最近在尝试写一个接口,遇到了很多问题,带着问题查看了很多文章,最后做出来了,于是就想记录下来。
用Ajax实现接口(用到了Ajax、formdata、springcontroller后台接收formdata)
我是用两个端口来运行,一个当服务器,一个当客户端,(如果是在一个项目里jsp和controller层传值回调不会出现跨域问题,也就不用设置response.setHeader,后面会说到)测试传值与跨域回调。。
二、放行问题(在当服务器的项目设置)
在spring配置文件里(这个名字有点出入,但差别应该不大),设置放行。
还有一个Const.java的文件里设置
这个项目是封装的,我也不知道正常的spring里有没有这个文件
三、jsp页面(在当客户端的项目那设计)
from表单这样写,后面可以直接用formdata直接取所有的数据
<form action="" name="Form" id="Form" method="post" enctype="multipart/form-data" > <table> <tr> <td>图片:</td> <td><input type="file" name="upload" id="upload" /></td> </tr> <tr> <td>标题:</td> <td><input type="text" name="atta_title" id="atta_title" /></td> </tr> <tr> <td>内容:</td> <td><input type="text" name="atta_content" id="atta_content" /></td> </tr> <tr> <td>是否成功:</td> <td><span id="isSuccess"></span></td> </tr> <tr> <td> <a onclick="save();">上傳</a> </td> </tr> </table> </form>
接口就设置访问controller层里的地址(这里的url)
function save() { var formData = new FormData(document.getElementById("Form")); $.ajax({ type: "POST", cache: false, url: "http://localhost:8080/checkport/receivedata", data: formData, processData: false, contentType: false, async: false, dataType:'json', success: function (data) { console.log(data); $("#isSuccess").text(data.Msg); }, error: function () { alert("错误"); } }); }
四、controller层(当服务器的那个项目里)
package com.fh.controller.trace.doublerandommanager; import com.fh.controller.base.BaseController; import com.fh.util.*; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.*; @Controller @RequestMapping(value = "/checkport") @ResponseBody public class CheckPortController extends BaseController { @RequestMapping(value = "/receivedata") public Object ReceiveData(HttpServletRequest request,HttpServletResponse response) throws Exception{ //设置为任意域请求都能获取到数据(用于ajax回调) response.setHeader("Access-Control-Allow-Origin","*"); MultipartHttpServletRequest multipartRequest =(MultipartHttpServletRequest) request; Map<String,String> map = new HashMap<>(); MultipartFile file = multipartRequest.getFile("upload"); String atta_title = multipartRequest.getParameter("atta_title"); String atta_content = multipartRequest.getParameter("atta_content") ; map.put("Msg","Success"); return map; } }
用MultipartHttpServletRequest接收formdata传来的值,这个是为了跨域回调。。。
response.setHeader("Access-Control-Allow-Origin","*");