console access jquery--------json

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请求完成(不管成功失败,都会死乞白赖出来)");
})

时间: 2024-08-24 18:31:24

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

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

JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为一种轻量数据格式,被浏览器js引擎普遍支持,同xml格式. 使用AJAX+JSON数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置, 来实现动态页面,表示

echart+jquery+json统计TP数据

由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very simple: 1. Sort all times in ascending order: [2s, 10s, 100s, 1000s] 2. find latest item in portion you need to calculate. 2.1 For TP50 it will be ceil(

JQuery+Json

结合使用jQuery和Json的话感觉不错,操作上来说很方便,先简单说说Json的一些优点,当然Json不仅仅这些优点. 1.方便前台数据的操作. 2.数据体积小,传输快. 3.客户端操纵XML的时候需要创建ActiveX对象,Json则完全就是一个JS对象,它不需要创建DOM. 下面是一个简单的例子,大家可以参考一下,主要功能有:1.获取js值.2.获取单个值.3.获取对象值.4.获取List对象.5.获取Map对象. 具体代码如下: 先看看控制器Action的代码.JsonJqueryStr

PHP JQuery Json

PHP: echo Json_encode($result); Jquery: $.get( 'process.php', {'p1':'aa','p2':'dd', 'data_type':'json'}, function(data){ var resultJson=jQuery.parseJSON(data); if(resultJson.length>0) alert(resultJson[0][AA]; alert(resultJson.A.AA); } );   PHP JQuery

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

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

jquery JSON解析代码

jquery JSON解析说明.这里首先给出JSON字符串集,代码: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'610

Sharepoint2013 webpart 使用Jquery+json数据实现的菜单。

Sharepoint2013 webpart 使用Jquery+json数据实现的菜单. 分类: sharepoint2014-11-17 14:17 215人阅读 评论(0) 收藏 举报 把代码块1 复制到txt 里单击后缀名字为js  such as xxx.js.  把此文件上传的文档库.右键--文件完全URL 在Sharepoint2013 里创建 一个webart 内容编辑器--编辑webpart --在content Link--单击浏览 把上面的URL复制进去. js文件和样式文件

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

struts2+jquery+json集成

以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步骤: 1.新建一个web工程,导入struts2+jquery+json所需jar,如下图 目录结构图 2.创建实体类User package com.ljq.bean; import java.io.Serializable; @SuppressWarnings("serial") pu