使用ajax跨域调用springboot框架的api传输文件_AJAX相关

来源:脚本之家  责任编辑:小易  

方法一、采用jsonp(只支持get请求,后端返回的jsonp格式json,后端无需做请求放行操作)方式二:采用原始ajax(后端需要拦截请求 设置指定路由放行)Java后端:方式三:XHR2(XMLHttpRequest Level 2)需要设置后端请求放行response.setHeader(“Access-Control-Allow-Origin”,”*”);response.setHeader(“Access-Control-Allow-Methods”,”GET,POST”);1.可以获取服务器端的二进制数据。2.可以友好的提交表单数据3.可以上传文件(内置控制上传进度事件逻辑)4.使用HTML表单来初始化一个FormData对象www.zgxue.com防采集请勿采集本网。

在新项目中使用的是springboot编写的api,涉及到ajax跨域请求和传输文件的问题,在这里记录一下

给个地址参照一下: http://blog.csdn.net/faneok/article/details/7663205

首先是前台页面的代码

我用的jsonp解决跨域问题,亲测可以,百度教程“jsonp”即可,非常详细。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test_api</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> function test(){ var obj = new Object; obj.name = $("#name").val(); obj.age = $("#age").val(); var file = document.getElementById("file").files[0]; var formData = new FormData(); formData.append("data",JSON.stringify(obj)); formData.append("file",file); $.ajax({ type:"post", url:"http://localhost:8187/test/upload", contentType:false, processData:false, data:formData, success:function(data){ alert(data.msg); } }); } </script> </head> <body> <div class=""> <table> <tr> <td>sCompany:</td> <td><input type="text" id="name" value="tom" /></td> </tr> <tr> <td>scardtype:</td> <td><input type="text" id="age" value="23" /></td> </tr> <tr> <td>file:</td> <td><input type="file" id="file" /></td> </tr> </table> <input type="button" onclick="test();" value="提交" /> </div> </body></html>

嗯,就是说啊,ajax只能在自己的域下访问,比如在腾讯里面写的AJAX 是不能去访问百度里面的东西的,这就是跨域的!使用AJAX是需要服务器环境的,目前只有火狐浏览器不需要搭建环境,即可直接使用

程序入口类的代码

服务端弄吧.页面的限制本来就多

package test;import javax.servlet.MultipartConfigElement;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.web.servlet.MultipartConfigFactory;import org.springframework.context.annotation.Bean;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;/** * Hello world! * */@SpringBootApplicationpublic class App { public static void main( String[] args ) { SpringApplication.run(App.class, args); } //设置ajax跨域请求 @Bean public WebMvcConfigurer corsConfigurer(){ return new WebMvcConfigurerAdapter(){ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"); } }; } @Bean public MultipartConfigElement multipartConfigElement(){ MultipartConfigFactory factory = new MultipartConfigFactory(); //设置上传文件大小限制 factory.setMaxFileSize("10MB"); //设置上传总数据大小 factory.setMaxRequestSize("15MB"); return factory.createMultipartConfig(); }}

因为安全限制,ajax的POST方法是不支持跨域的。所以你可以通过get方法进行跨域请求。也可以通过标签进行跨域请求!

api代码

package test.controller;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import test.model.UploadInfo;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;@RestController@RequestMapping("/test")public class TestController { /** * 上传文件 * @param req form请求 * @return json字符串 */ @RequestMapping(value="/upload", method=RequestMethod.POST) public String uploadFile(HttpServletRequest req){ // 返回结果用 json对象 JSONObject returnObj = new JSONObject(); //从请求中获取请求的json字符串 String strData = req.getParameter("data"); //将获取到的JSON字符串转换为Imgidx对象 UploadInfo info = JSON.parseObject(strData, UploadInfo.class); //获取上传的文件集合 List<MultipartFile> files = ((MultipartHttpServletRequest)req).getFiles("file"); MultipartFile file = files.get(0); // 返回信息头部 Map<String, String> header = new HashMap<String, String>(); header.put("code", "0"); header.put("msg", "success"); File file1234 = new File(file.getOriginalFilename()); //插入数据的影响的数据条数 int result = 0; //将文件上传到save if(!file.isEmpty()){ try{ byte[] arr = new byte[1024]; BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(file1234)); bos.write(arr); bos.flush(); bos.close(); }catch(Exception e){ header.put("code", "-1"); header.put("msg", "errorMsg:" + e.getMessage()); } }else{ header.put("code", "-1"); header.put("msg", "errorMsg:上传文件失败,因为文件是空的"); } String returnStr = returnObj.toJSONString(header); return returnStr; }}

因为安全限制,ajax的POST方法是不支持跨域的。所以你可以通过get方法进行跨域请求。也可以通过&lt;script&gt;标签进行跨域请求!内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • spring框架实现aop添加日志记录功能过程详解
  • spring整合quartz框架过程详解
  • springboot整合jquery和bootstrap框架过程图解
  • springboot2 集成log4j2日志框架的实现
  • ssm框架中测试单元的使用 spring整合junit过程详解
  • spring框架配置实体类复杂属性注入xml文件过程详解
  • springmvc框架实现图片上传与下载
  • springboot框架restful接口设置跨域允许
  • springboot多模块项目框架搭建过程解析
  • ajax的responsetext乱码的问题的解决方法
  • jquery的ajax的用法在asp中使用$.ajax()实现
  • jquery实现ajax定时刷新局部页面实例
  • jquery中ajax - post() 方法实例详解
  • 浅谈ajax开发技术
  • ajax接收date类型的数据时会把数据转换为时间戳
  • ajax请求二进制流进行处理(ajax异步下载文件)的简单方法
  • 天枫ajax天气预报系统v1.0
  • jquery ajax使用心得详细整理及注意事项
  • boa服务器下的ajax与cgi通信
  • RESTful 跨域时,可以用ajax调用么,怎么实现的
  • ajax跨域请求如何实现
  • ajax和asp跨域调用,小白,如何实现呢?
  • ajax跨域到底是什么意思?能否举个简单例子说明一下?
  • ajax跨域调用webservice要怎么搞。webservice是别的服务器上的。
  • Ajax 跨域调用webservice 如何处理
  • 为什么有人说ajax不能跨域是什么意思 不是可以通过ajax跨域访问吗
  • 调用其他网站开放的接口,如果在页面使用ajax调用的话,跨域问题怎么解决?
  • ajax 如何实现跨域请求获取返回值?
  • ajax是否能跨域请求 解决的办法
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关spring框架实现aop添加日志记录功能过程详解spring整合quartz框架过程详解springboot整合jquery和bootstrap框架过程图解springboot2 集成log4j2日志框架的实现ssm框架中测试单元的使用 spring整合junit过程详解spring框架配置实体类复杂属性注入xml文件过程详解springmvc框架实现图片上传与下载springboot框架restful接口设置跨域允许springboot多模块项目框架搭建过程解析ajax的responsetext乱码的问题的解决方法jquery的ajax的用法在asp中使用$.ajax()实现jquery实现ajax定时刷新局部页面实例jquery中ajax - post() 方法实例详解浅谈ajax开发技术ajax接收date类型的数据时会把数据转换为时间戳ajax请求二进制流进行处理(ajax异步下载文件)的简单方法天枫ajax天气预报系统v1.0jquery ajax使用心得详细整理及注意事项boa服务器下的ajax与cgi通信jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现jquery ajax中使用serialize()方ajax获取数据中文乱码问题最简单自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ieajax获取数据然后显示在页面的实ajax案例集下载:新增分页查询案例(包括ajax解析xml实例之下拉框省、市二级联动ajax处理服务器返回的三种数据类型方法ajax跨域请求之jsonp获取json数据深入理解ajax系列第一篇之xhr对象利用ajax传递数组及后台接收的方法详解ajax封装类使用指南ajax读取xml实现动态下拉导航解决ajax返回状态200没有调用success的问ajax内部值外部调用不了的原因及解决方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved