WebService :前后端数据传递
程序员文章站
2022-07-02 22:32:01
...
这一篇主要总结前端传递的数据和后端的接收方式:
1.前端JSON字符串–后端String
function filter() {
//json字符串
var workJsonString = "{\"name\":\"张三\",\"age\":1,\"classname\":\"一年级\"}";
$.post('http://localhost/test/json',{
json : workJsonString,
name : "gang"
},
function (data) {
console.log(data);
}, "json");
}
后端接收:
//测试接收json,返回json
@POST
@Path("json")
@Produces({MediaType.APPLICATION_JSON})
public String Code2(@FormParam("json")String json,@FormParam("name")String name) {
log.debug(json);
log.debug(name);
return json;
}
2.前端对象–后端对象
function firstFilter(type) {
let firstfilter = {};
firstfilter.filterMain = filterMain;
firstfilter.filterBig = filterBig;
firstfilter.filterSmall = clist;
firstfilter.filtertype = type;
$.ajax({
type: "POST",
dataType: "json",
url: test.url + "test/filter",
contentType: "application/json",
data: JSON.stringify(firstfilter),
success: function (data) {
console.log(data);
}
});
}
@POST
@Path("filter")
public String filterBig(Filter filter) {}
//此处后端有一个Filter的实体类,且属性量>=前台的属性量(属性同名)
//当前端传递的是后端已有的Model的时候,是可以直接接收的,前提是对应的属性名称要一样
//属性值可以缺失,但是不能多!!!
//当多的时候通常会报400错误
3.前端对象–后端对象(传递额外参数)
有时我们不仅仅需要对象,还需要得到其他的参数作为辅助,这个时候前端的AJAX的data如果写入多个就可能出现错误
我的解决思路是使用@Formparam 和@Queryparam传递多个参数
let firstfilter = {};
firstfilter.filterMain = filterMain;
firstfilter.filterBig = filterBig;
firstfilter.filterSmall = clist;
firstfilter.filtertype = type;
let param = "param1=" + param.param1+ "¶m2=" + param.param2+ "¶m3=" +param.param3;
//这里将数据以参数的形式设置
$.ajax({
type: "POST",
dataType: "json",
url: test.url + "test/filter?" + param,
contentType: "application/json",
data: JSON.stringify(Filter),
success: function (data) {
console.log(data);
}
});
//webService中后端直接使用
@POST
@Path("filter")
public String returnid(Filter filter , @QueryParam("param1") String param1, @QueryParam("param2") String param2, @QueryParam("param2") String param2) {}
同理还可以使用Pathparam
$.ajax({
type: "POST",
dataType: "json",
url: staticmessage.url + "test/filter/" + param1,
contentType: "application/json",
data: JSON.stringify(Filter),
success: function (data) {
console.log(data);
}
});
@POST
@Path("filter/{param1}")
public String returnid(Filter filter , @PathParam("param1") String param1) {}
4.前端数组对象–后端List对象
注意:前端的array就是后端的List
//数组 clist.push("001"); clist.push("002");
$.ajax({
type: "POST",
url: "http://localhost/test/array",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(clist),
success: function (data) {
console.log(data);
}
});
//这里直接用List接收前端数据
//测试接收数组,返回数组
@POST
@Path("array")
@Produces({MediaType.APPLICATION_JSON})
public String Code1(List<String> array) {
log.debug("array"+array.size());
for(String a :array){
log.debug(a);
}
return "1111";
}
5.前端对象–后端JSON对象
这种方法是最灵活的,前端直接将对象转换为JSON字符串,后端用字符串接收,然后转成对象或者其他数据
//前端 :
//注意 :这被转换为字符串JSON.stringify(jsonitem)
//包含两个对象
let jsonitem = {};
jsonitem.param1= "11";
jsonitem.param2="118";
$.ajax({
type: "POST",
dataType: "json",
url: "http://127.0.0.1/test/url",
contentType: "application/json",
data: JSON.stringify(jsonitem),
success: function (data) {
console.log(data);
}
});
//后端 :
@POST
@Path("url")
public String urlTest(JSONObject json) {
JSONObject node = new JSONObject();
log.debug(json.toString());
log.debug(json.toJSONString());
log.debug(json.getString("param1"));
log.debug(json.getString("param2"));
return node.toJSONString();
}
//信息: [DEBUG] [http-listener-1(1)] com.yuntuo.dc.api.AppPurchase - {"param1":"11","param2":"118"}
6.总结
webservice 前后的传递大概就这些,有新的会补充进去
代码有些许删减,可能会出现之前没碰到的错误
上一篇: Promise的个人理解及实践
推荐阅读
-
Android通过ksoap2传递复杂数据类型及CXF发布的webservice详细介绍
-
Android通过ksoap2传递复杂数据类型及CXF发布的webservice详细介绍
-
SpringMVC参数绑定学习总结【前后端数据参数传递】
-
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
-
前端后端数据传递的几种方式
-
使用ajax+SpringMVC实现前后端数据传递
-
django前后端数据传递
-
WebService :前后端数据传递
-
Python Flask No.5_Flask前后端间数据传递与展示
-
Spring 自带验证框架 - MVC架构 - 前端给后端传递数据时校验数据-较为方便