jq = document.createElement('script');  
jq.src = "file:///home/liulqiang/jquery.js";  
document.getElementsByTagName('head')[0].appendChild(jq);  
jQuery.noConflict();

在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析是关键。

先明确2个概念例如:

JSON字符串:

var str1 = '{ "name": "deyuyi", "sex": "man" }';

JSON对象:

var str2 = { "name": "deluyi", "sex": "man" };

可以简单这样理解:

JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样;

JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;

一、ajax请求


1、load(url, [data], [callback])

    概述:加载远程的HTML文件代码,并插入到指定的DOM节点中。

    参数:url:待装入 HTML 网页网址。

    data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

    callback:载入成功时回调函数。

    可以只传入一个参数,表示加载一个静态的HTML代码片段。

$("#div1").load("load.html");

  2、$.ajax():是JQuery最底层的ajax函数,参数接收一个大对象。对象里面的属性和方法,表示ajax请求的相关设置:

     (1)url : 请求远程文件的路径

    (2)type: Ajax请求的类型,可选值 get/post

    (3)data: 对象格式。向后台发送一个对象,表示传递的数据。

       常用与type为"post"的请求方式;如果type为"get",可以直接使用?追加在URL的后面。

    (4)dataType :预期后台返回什么类型的数据。

        "text"-字符串 "json"-JSON对象

    (5)success: 请求成功的回调函数。参数接受一个data,表示后台返回的数据。

    (6)error : 请求失败的时候的回调函数

    (7)statusCode : 接受一个对象,对象的键值对是status状态码和对应的回调函数,表示当请求状态码是对应数字时,执行具体的操作函数。

      200-正常请求成功     404-页面没有找到    500-服务器内部错误。

$.ajax({
url : "http://localhost/json.php?name='zhangsan'&age=12",
type: "post",
data : {
name : "李四",
age : 28
},
dataType : "json",
success : function(data){
// JQuery中吧JSON字符串转成JSON对象
var jsons = $.parseJSON(data);
console.log(jsons);
},
error: function(){
alert("请求失败啦!");
},
statusCode:{
"404":function(){
alert("404表示页面没有找到");
},
"500":function(){
alert("500表示服务器内部错误");
},
"200":function(){
alert("200表示请求成功");
}
}
});

  3、$.get();  $.post(); 这两个函数,是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求;    

    接受四个参数:

① 请求的URL路径。 相当于$.ajax()里面的url;
② 向后台传递的数据。 相当于$.ajax()里面的data;
③ 请求成功的回调函数。 相当于$.ajax()里面的success;
④ 预期返回的数据类型。 相当于$.ajax()里面的dataType;

$.post("http://localhost/json.php",{data:"aaa"},function(data){
console.log(data);
},"json");

  4、$.getJSON 以Get的方式,请求JSON对象的数据

$.getJSON("http://localhost/json.php",{data:"aaa"},function(data){
console.log(data);
});

  5、$.parseJSON(str) 将JSON字符串转为JSON对象

    标准的JSON字符串,键必须用双引号包裹。

var str = '{"age":12}'
var obj = $.parseJSON(str);
console.log(obj);

6、.trim() 去除掉字符串两端空格

var str1 = "   123    ";
console.log(str1.trim());

7、用户遍历数组和对象

遍历数组时,函数的第一个参数是下标,第二个参数是值;

遍历对象时,函数的第一个参数是键,第二个参数是值

var arr = [1,2,3,4,5,6,7];
var obj = {
name : "zhangsan",
age : 12,
sex : "nan"
}
$.each(obj,function(index,item){
console.log(index);
console.log(item);
});


二、ajax事件


  AJax的各种监听事件:

  ajaxStart ——→ ajaxSend ——→ ajaxSuccess/ajaxError/ajaxComplete ——→ ajaxStop

$(document).ajaxSend(function(){
alert("ajax请求发送");
});
$(document).ajaxStop(function(){
alert("ajax请求停止");
})
$(document).ajaxStart(function(){
alert("ajax请求开始");
})
$(document).ajaxSuccess(function(){
alert("ajax请求成功");
})
$(document).ajaxError(function(){
alert("ajax请求失败");
})
$(document).ajaxComplete(function(){
alert("ajax请求完成(不管成功失败,都会死乞白赖出来)");
})

console access jquery--------json的更多相关文章

  1. jquery json对象转换

    jquery json对象转换 <pre>//json数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr ); //json ...

  2. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  5. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  6. struts2+jquery+json集成

    以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...

  7. jQuery+JSON+jPlayer实现QQ空间音乐查询

    演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...

  8. echart+jquery+json统计TP数据

    由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very si ...

  9. chrome 浏览器 console 加入 jquery 测试调试 一介布衣

    chrome 浏览器 console 加入 jquery 测试调试 一介布衣   var jquery = document.createElement('script'); jquery.src = ...

随机推荐

  1. 【Java集合的详细研究5】Java中Array与ArrayList的主要区别

    1)精辟阐述:可以将 ArrayList想象成一种“会自动扩增容量的Array”. 2)Array([]):最高效:但是其容量固定且无法动态改变:     ArrayList:  容量可动态增长:但牺 ...

  2. Win10開始菜单打不开

    一.前言 自从用Win10之后(附上<我的Win10之旅>).用清理软件.总是深度清理,导致rt问题. 每次百度都是没用的解决方法: 今天,再一次清理(Wise Care 365 注冊表深 ...

  3. RAC:Oracle11gR2:群集的起、停、状态查询

    一:查看群集的状态 1.0.1 使用crsctl status resource [-t] 1.0.2 使用crs_stat [-t] 1.0.1 使用srvctl status <obj> ...

  4. app服务端server端数据库设计

  5. swift - UIProgressView的用法

    1.创建进度条 progressView.frame = CGRect(x:10, y:230, width:self.view.bounds.size.width - 20, height:150) ...

  6. int()

    int() 用于将一个对象转换为整数,可转换的对象如下: In [1]: int(') # 将纯数字的字符串转换为整数 Out[1]: 10 In [2]: int(10.6) # 将浮点数转换为整数 ...

  7. Unity中Oculus分屏相机和普通相机一键切换

    Unity中Oculus分屏相机和普通相机一键切换 一.OCulus 分屏相机介绍 在VR开发工程中,总会觉得OC分屏的处理太慢,严重浪费时间啊! 但是不使用有不好调试,来回切换相机就成为了一个必须. ...

  8. C++中的抽象基类示例

    抽象基类(abstract base class,ABC)例子:圆与椭圆.建立一个基类BaseEllipse,建立它的恋歌继承了Ellipse和Circle.ellipse.h #ifndef ELL ...

  9. 谷歌Volley网络框架讲解——HttpStack及其实现类

    前两篇已经对网络请求流程已经梳理了个大概,这次我们着重看一下HttpStack和它的其实现类.我们之前在Network篇讲过它仅有一个实现类,而今天我们讲的HttpStack有两个实现类. 其中Htt ...

  10. JS-【同页面多次调用】tab选项卡封装

    这两天遇到一个页面,同一个页面中同一个特效会用好多次,比如tab,比如轮播等.我又不想很不负责任的复制一遍代码,那样页面臃肿,自己心里也堵得慌.于是就想着把代码封装起来多次调用. 对于封装,只在公开课 ...