Ajax向前后台传递json和转换

时间:2023-03-09 03:05:02
Ajax向前后台传递json和转换

学生管理系统MVC模式设计心得:

jquery .ajax提交data数据格式

jquery 的Ajax方法提交数据,但是是多个参数,具体data的格式如下:

data提交的数据类型为:Object 或 String

data数据说明:发送到服务器的数据。如果不是字符串,将会被转换为字符串。

GET请求将会被附加到URL后面。防止自动转换。对象必须为key/value数据格式。

例如:{foo1:"bar1",foo2:"bar2"}转换为 &foo1=bar1&foo2=bar2

如果是数组,JQuery将自动为不同的值类型对应同一个名称。

例如:{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2

也就是在JQuery中ajax提交data的数据格式为:{x:"x1",x2:"x3"}这种方式,如果有参数传入,格式如下:

data: {get_id: get_item_id,filter:"item"},

get_item_id是外部的参数。

转载自:黄兵个人博客 - jquery .ajax提交data数据格式

Ajax从后台返回前台的数据类型dataType参数:

•"xml": 返回 XML 文档,可用 jQuery 处理
•"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行
•"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。
 注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
 •"json": 返回 JSON 数据
 •"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,
 如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
 •"text": 返回纯文本字符串

json的传递:

将java的List类型返回前台时,先将List转换为包含 json对象的JSONArray数组再传回前端

需要的jar包:json-lib-2.4-jdk15.jar 及其依赖包

后台:

 List<Student> student_list = new ArrayList<Student>();

 JSONArray jsonArray2 = JSONArray.fromObject(student_list);

 //JSONArray: [{no:"123", name:"张三"},{no:"124", name:"李四"},{...},{...}]

 PrintWriter printWriter = response.getWriter();
printWriter.print(jsonArray2);

前台:

function MyAjax(url, send_data, successFun,beforeSendFun,isAsync) {
if (isAsync == null)
isAsync = true;
$.ajax({
url : url,
type : "POST",
data : send_data,
async : isAsync,
dataType:'json',
beforeSend : beforeSendFun,
success : function(return_data) {
successFun(return_data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("请求处理失败");
}
});
}

Ajax前台向后台传递对象:

将js对象或者json对象转换为json字符串在Ajax传递,在后台中再将json字符串转换为json对象,再转换为java对象

 var student={
name:"abc",
age:12,
no:"123"
}; console.log(student);
//将js对象转换为json字符串通过ajax传递,在后台中再将json字符串转换为json对象再转换为java对象 student = JSON.stringify(student);

Ajax:

 $.ajax({
url : url,
type : "POST",
data : {
sendData:"传递下面的json字符串",
jsonStr: student
},
async : isAsync,
dataType:data_type,
beforeSend : beforeSendFun,
success : function(return_data) {
successFun(return_data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("请求处理失败");
}
});

后台解析:

String sendData = request.getParameter("sendData");

if (sendData.equals("传递下面json字符串")){

String jsonStr = request.getParameter("jsonStr");

JSONObject student_json= new JSONObject().fromObject(jsonStr);//将json字符串转换为json对象
Student student = (Student)JSONObject.toBean(student_json,Student.class);//再将json对象转换为Student对象 }

json格式转换:

JS对象格式:

 var obj = {

       name: "饼干",      

       code: "PC-001",      

       price: 360,      

       getInfo: function () {

               return this.name;

       }

     }    

json对象:

var obj = {

        name: "饼干",      

        code: "PC-001",      

        price: 360,      

        getInfo: function () {

               return this.name;

       }

     }    

json字符串格式:

jsonStr="{"a":"adc","b":123,"c":"哈哈"}"

json对象,js对象,json字符串,java对象之间的常用转换:

str=JSON.stringify(obj);    json对象转换为json字符串
obj=JSON.parse(str);        json字符串转换为json对象
 var obj={
a:"adc",
b:123,
c:"哈哈"
};
console.log(obj);//js对象 obj=JSON.stringify(obj);//转换为json字符串
console.log(obj);
10 //obj="{"a":"adc","b":123,"c":"哈哈"}"

obj=JSON.parse(obj);//json字符串转换为json对象
console.log(obj);
//{a: "adc", b: 123, c: "哈哈"}

一、JSON字符串转化为JSON对象

假设我们有如下 JSON 字符串需要转换为 JSON 对象。
var jsonStr = '[{"CityId":18,"CityName":"西安"},{"CityId":53,"CityName":"广州"}]';

1,使用eval()函数进行转换

  • 使用 eval() 转换时需要在 json 字符外包裹一对小括号。
  • ie8(兼容模式)、ie7、ie6 不要使用此方法。
var jsonObj = eval('(' + jsonStr + ')');
alert(jsonObj[0]["CityName"]);

2,使用JSON.parse()方法进行转换

var jsonObj = JSON.parse(jsonStr);

3,使用json2.js进行转换

json2.js 提供了 json 的序列化和反序列化方法,完美支持各个浏览器。
使用时我们首先要将 json2.js 引用进来,源码地址:https://github.com/douglascrockford/JSON-js

var jsonObj = JSON.parse(jsonStr);

4,使用jQuery进行转换

如果我们项目中有使用 jQuery,那么直接使用 $.parseJSON() 方法即可,而且可以确保各个浏览器的兼容性。

var jsonObj = $.parseJSON(jsonStr);

二、JSON对象转化为JSON字符串

假设我们有如下的对象:

var jsonObj = {
"CityId":"18",
"CityName":"西安2"
};

1,使用JSON.stringify()方法进行转换

该方法不支持较老版本的IE浏览器,比如:ie8(兼容模式)、ie7、ie6。

运行结果如下:

var jsonStr = JSON.stringify(jsonObj);
alert(jsonStr);

2,使用json2.js进行转换

下载使用 json2.js,具体地址参考前面内容。使用方式和上面一样。

var jsonStr = JSON.stringify(jsonObj);

3,使用jQuery进行转换

首先对 jQuery 进行扩展,增加个 json 对象转字符串的方法。

jQuery.extend({
stringify : function stringify(obj) {
var t = typeof (obj);
if (t != "object" || obj === null) {
// simple data type
if (t == "string") obj = '"' + obj + '"';
return String(obj);
} else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor == Array); for (n in obj) {
v = obj[n];
t = typeof(v);
if (obj.hasOwnProperty(n)) {
if (t == "string") v = '"' + v + '"';
else if (t == "object" && v !== null) v = jQuery.stringify(v);
json.push((arr ? "" : '"' + n + '":') + String(v));
}
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
}
});

使用方式如下:

var jsonStr = $.stringify(jsonObj);

java对象与json对象间的相互转换

1.将json字符串转换java对象

 JSONObject jsonObj = new JSONObject().fromObject(jsonStr);//将json字符串转换为json对象

 //将json对象转换为java对象
Student student =(Student)JSONObject.toBean(jsonObj,Student.class);//将json对象转换为Student对象

1.将java对象转换json字符串

 //先将java对象转换为json对象,在将json对象转换为json字符串
JSONObject json = JSONObject.fromObject(obj);//将java对象转换为json对象 String str = json.toString();//将json对象转换为字符串