ajax,json学习笔记(三)JSON和jquery实现ajax
来源:互联网 发布:怎么看mac系统版本 编辑:程序博客网 时间:2024/05/16 20:17
利用JSON实现前后台数据交互,且方便
1、基本概念
1) JSON(JavaScript Object Notation):javaScript对象表示方法
2) 是存储和交换文本信息的语法,类似xml,采用键值对的方式来组织
3) JSON是独立于语言的,任何语言按json规则就能解析json
4)优点
长度比xml短,读写速度快,可以用javaScript内建的方法直接解析转换成javascript对像
2、JSON 语法规则
1)JSON 数据书写格式:名称/值 对
名称和值在双引号中,例如:"name":"马玉"
2)JSON值可以使数字、字符串、逻辑值、数组(在[]中)、对象(在{}中)、null
例子
{
"people": [
{
"name": "郭靖",
"age": "12"
},
{
"name": "黄蓉",
"age": "12"
}]
}
3、JSON 解析
1)方法:eval 和 JSON.parse
注意:eval执行第三方JSON数据危险(可能有恶意代码),会执行json字符串中的js方法
JSON.parse()除了解析字符串还可以捕捉JSON中语法错误
eval: <script>
var jsondata = '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
var dataObj=eval("("+jsondata+")");
alert(dataObj.people[0].name)
</script>
JSON.parse: <script>
var jsondata = '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
var dataObj=JSON.parse(jsondata);
alert(dataObj.people[0].name)
</script>
2)JSON校验工具:http://json.parser.online.fr/
4、约定JSON
{
"success":true,
"msg":"xxx"
}
后台通过写成json字符串或者JSONArray.toJSON(Object)等方法把对象转化为json格式数据传到前台,前台js对其进行解析展示
5、 springmvc处理ajax请求
参考:https://www.cnblogs.com/tingbogiu/p/5796199.html
例子
后台: // ajax不用返回页面返回值为void
@RequestMapping("/jQUeryTest")
public void jQUeryTest(HttpServletRequest request, HttpServletResponse response){
List<Category> cs= categoryService.list();
// 把列表转为json数组,ModelAndView是直接把列表转为json格式
String jsonResult = JSON.toJSONString(cs);
renderData(response, jsonResult);
}
private void renderData(HttpServletResponse response, String data) {
response.setCharacterEncoding("UTF-8");
PrintWriter printWriter = null;
try {
printWriter = response.getWriter();
printWriter.print(data);
} catch (IOException ex) {
System.out.println(ex);
} finally {
if (null != printWriter) {
printWriter.flush();
printWriter.close();
}
}
}
页面:$(document).ready(function(){
$("#test3").click (function(){
$.ajax({
type:'POST',
url:'http://localhost:8080/MyFirstSSM/jQUeryTest',
data: {
},
dataType:'json',
success:function(data){ //已经解析
$("#test4").text("第1个用户:"+data[0].name);
},
error:function(jqXHR){
alert('发生错误:'+jqXHR.status);
}
});
});
});
6、jquery实现ajax
jQuery.ajax([settings])
通过设置值来完成ajax请求
1、常用设置
1)type:请求类型,‘post'或‘get',默认’get'
2)url:发送请求的地址
3)data:一个对象,连同请求发送到服务器中的数据
4)dataType:预期服务器返回的数据类型,如果不指定,jQuery自动根据HTTP包MIME信息智能判断,一般采用JSON,设置为'json'
5) success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串
6)error:是一个方法,请求失败调用的函数,传入XMLHttpRequest对象
例子
$("#test3").click (function(){
$.ajax({
type:'get',
url:'http://localhost:8080/MyFirstSSM/listCategory',
dataType:'json',
success:function(data){ //已经解析过了字符串
$("#test4").text("第2个用户:"+data[1].name);
},
error:function(jqXHR){
alert('发生错误:'+jqXHR.status);
}
});
});
- ajax,json学习笔记(三)JSON和jquery实现ajax
- Struts学习笔记(三)Ajax +json+JQuery的综合使用
- Ajax、json学习笔记
- ajax&&json学习笔记
- ajax(json)学习笔记
- Ajax和JSON笔记
- jquery+ajax+json+asp.net学习笔记(一)
- jquery+ajax+json+asp.net学习笔记(二)
- Ajax学习和JSON
- ajax json php jquery 实现json数据发送和处理
- JQ笔记(jQuery + ajax + json)入门
- JavaScript学习笔记一AJAX和JSON
- ZendFramework2学习笔记 json和ajax
- .NET+jQuery+JSON实现Ajax
- .NET+jQuery+JSON实现Ajax
- Jquery和PHP Ajax JSON
- jQuery操作Ajax和Json
- ajax,json学习笔记(四)跨域
- linux系统之selinux详解
- 权限管理--网上论坛节选
- struct file 结构体
- 计算与推断思维 一、数据科学
- java double类型加减运算时出现的精度丢失问题
- ajax,json学习笔记(三)JSON和jquery实现ajax
- 1080求和问题
- 【Python】从字符串中提取字母字符串的几种方法
- wampserver允许同一局域网下(手机或其他设备)访问配置教程
- vmware安装方法及共享文件夹设置方法
- 整数补码——如何定义相反数。
- Docker容器和本机之间的文件传输
- Servlet
- Git版本管理--基础操作