【跨域】axios提交简单请求发送json字串 ,调用服务接口写数据

场景:前后端分离跨域,前端使用axios提交post请求,参数json字串;服务端getRawData获取参数,转Model 对象处理数据。

前提:服务端设置了CORS 允许跨域请求  

参考 http://www.jfinal.com/share/1137  感谢作者~ suxiaoqiuking


【示例】:

axios提交请求:

jobj 是提交的业务参数 json对象:


 let jobj = {}
 jobj.type = 0
 jobj.level = 2
 jobj.name = '化妆盒'
 jobj.parent_id = 16

接口:

// 新增货品类目项
export const apiPostSpuCateItem = (jobj) => {
  return new Promise((resolve, reject) => {
    axios.request({
      url: 'goods/cate/addSpuCateItem',
      method: 'post',
      headers: {
        'Content-Type': 'text/plain'  //这里重点
      },
      data: JSON.stringify(jobj)
    }).then(res => {
      // 接口处理成功返回 ok 这里自定义处理返回结果
      let rst = { isok: false, msg: '' }
      // state 为服务接口定义的返回属性
      if (res.data.state === 'ok') {
        // 这里定义业务需要转译的状态值
        rst.isok = true
      } else {
        rst.isok = false
        rst.msg = res.data.msg
      }
      resolve(rst)
    })
  })


jfinal 服务端 Controller:

/**
* 新增货品分类
*/
public void addSpuCateItem(){
    // 获取提交的json字串 参
    String json = getRawData();
    // 调用服务端处理 数据持久化
    Ret ret = srv.addByModel(FastJson.getJson().parse(json, SpuCate.class));
    renderJson(ret) ;

}



处理结果:

提交axions 跨域请求带json字参.png


参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

jfinal-4.5_demo_for_maven.zip

评论区

JFinal

2019-09-26 10:25

ajax 支持后端 getRawData() , 超赞

JFinal

2019-09-26 23:15

jquery 可以通过配置 contentType: 'application/json' 参数来支持提交 json 数据,例如:

// 表单序列化成 json 字符串
function formToJsonString(formId) {
var paramArray = $('#' + formId).serializeArray();
// 表单参数转 json 对象
var jsonObj = {};
$(paramArray).each(function() {
jsonObj[this.name] = this.value;
});

// json 对象转 json 字符串
return JSON.stringify(jsonObj);
}

$.ajax({
type: "post",
url: "http://localhost/action",
contentType: 'application/json', // 关键参数
dataType: 'json',
data: formToJsonString(表单id),
success: function(ret) {
}
});


最后,在后端 Controller 中通过如下代码可以获取参数值:
String json = getRawData();
Map map = FastJson.getJson().parse(json, Map.class);

热门分享

扫码入社