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"}
这种方式,如果有参数传入,格式如下:
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对象
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对象转换为字符串
Ajax向前后台传递json和转换的更多相关文章
- ajax向后台传递数组参数并将后台响应的数据赋值给一个变量供其它插件使用
1.在js中封装ajax向后台传递数组参数函数 //combogrid * * @Description 封装ajax向后台传递数组参数并将后台响应的数据赋值给一个变量方便其他插件使用该数据函数 * ...
- ajax往后台传json格式数据报415错误
问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...
- 【转】jQuery.ajax向后台传递数组问题
$.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, "box ...
- jQuery.ajax向后台传递数组问题
今天重温了一个问题,jQuery.ajax向后台传递一个数组,而在后台接收不到该值 前台js方法部分代码如下: //创建一个测试数组 var boxIds = new Array(); boxIds. ...
- ajax获取后台传递的json数据
最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...
- 使用Ajax向SpringMVC传递Json数据
这篇文章已经过时了. 请参考比较合适的前后端交互方式. 1.保证SpringMVC配置成功了. 2.在pom.xml中追加Jackson相关的依赖 <dependency> <gro ...
- easyui之datagrid之formatter(后台传递常量自动转换值)
1,datagrid之formatter formatter格式化函数有三个参数: value:字段值(一般为后台传递给前台的值): row:当前行数据: index:当前行索引. return值是显 ...
- JS向后台传递json数组对象
var Obj = []; //一下代码可以循环插入 var returnObj = new Object();//创建一个对象 returnObj.id = “123”: returnObj.mon ...
- aspx后台传递Json到前台的两种接收方法
第一种:前台接收 dataType: "json", success: function (data) { va ...
随机推荐
- 九:SQL之DQL数据查询语言多表操作
前言: 一:数据准备 员工表emp 和部门表 dept 注意:我在录入员工表的时候,特意添加了两条没有部门的员工,他们的部门id对应为null; --分别创建部门和员工表,并实现一对多关系 DROP ...
- 如何用纯 CSS 创作一个记事本翻页动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKOPGw 可交互视频教 ...
- gpio/外设/控制器
1.项目中所有的外设pad都是通过GPIO与控制器相连的.比如FSHC<=>gpio<=>flash 2.gpio类似多个 mux 集合. 3.对于与gpio相连的pad具体结 ...
- 【http】【转发】HTTP访问控制(CORS)
当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 比如,站点 http://domain-a.com 的某 HTML 页面通过 <img ...
- Web框架之Django_03 路由层了解(路有层 无名分组、有名分组、反向解析、路由分发 视图层 JsonResponse,FBV、CBV、文件上传)
摘要: 路由层 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态网页.虚拟环境 视图层 JsonResponse FBV 与 CBV(function base views与class bas ...
- python动态添加属性和方法
---恢复内容开始--- python动态添加属性: class Person(object): def __init__(self,newName,newAge): self.name = newN ...
- 剑指Offer(书):链表中环的入口节点
题目:给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. public ListNode EntryNodeOfLoop(ListNode pHead) { //第一步,查找是 ...
- Linux服务器硬件设备信息查看
一.cpu信息 cpu信息存储在/proc文件系统的cpuinfo(/proc/cpuinfo)文件里,可以直接查看这个文件以获得cpu信息,所列字段解释如下: processor : 核心编号,如: ...
- CodeForces 699C - Vacations
题目链接:http://codeforces.com/problemset/problem/699/C C. Vacations time limit per test1 second memory ...
- 【Luogu】P1681最大正方形2(异或运算,DP)
题目链接 不得不说attack是个天才.读入使用异或运算,令que[i][j]^=(i^j)&1,于是原题目变成了求que数组的最大相同值. 然而我还是不理解为啥,而且就算简化成这样我也不会做 ...