用Ajax实现接口（用到了Ajax、formdata、springcontroller后台接收formdata）

最近在尝试写一个接口，遇到了很多问题，带着问题查看了很多文章，最后做出来了，于是就想记录下来。

我是用两个端口来运行，一个当服务器，一个当客户端，（如果是在一个项目里jsp和controller层传值回调不会出现跨域问题，也就不用设置response.setHeader,后面会说到）测试传值与跨域回调。。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

一、放行问题（在当服务器的项目设置）

在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.service.trace.attachmentmanage.AttachmentService;
import com.fh.service.trace.doublerandommanager.ProAttaService;
import com.fh.service.trace.doublerandommanager.TProductService;
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.annotation.MultipartConfig;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.*;

@Controller
@RequestMapping(value = "/checkport")
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","*");
是为了ajax跨域回调用。

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄