jQuery高级编程之js对象、json与ajax用法实例分析
本文实例讲述了jQuery高级编程之js对象、json与ajax用法。分享给大家供大家参考,具体如下:
js对象
创建js对象的两种方式:
1.通过new Object创建:
var p1 = new Object(); // 设置属性,和方法 p1.name = "张三"; p1.age = 13; p1.study = function(){ console.log(p1.name + "正在学习,葵花宝典"); } // 调用属性和方法 console.log(p1.name); console.log(p1.age); p1.study();
2.通过字面量(直接量)创建:
var p2 = { name:"李四", age:14, eat:function(){ onsole.log(this.name + "正在吃大蒜和榴莲"); } } console.log(p2.name); console.log(p2.age); p2.eat();
json
一种表达js对象的数据格式,是一串字符串,键值对形式,键需要加双引号,值不能是方法函数、undefined和空。
1.json转js对象:JSON.parse()
2.js对象转json:JSON.stringify()
ajax
ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。
常用参数:
参数 | 描述 |
---|---|
url | 请求地址 |
type | 请求方式,默认GET |
dataType | 返回的数据类型 |
data | 发送给服务器的数据 |
success | 成功后的回调函数 |
error | 失败后的回调函数 |
async | 是否同步,默认true异步 |
例(通过接口将数据显示到页面中):
$.ajax({ url:'/index_data', type:'get', dataType:'json', success:function(dat){ //console.log(dat); var aList = dat; var sTr = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>'; for(var i=0;i<aList.length;i++) { sTr += '<tr>' +'<td>'+ aList[i].id +'</td>' +'<td>'+ aList[i].code +'</td>' +'<td>'+ aList[i].sname +'</td>' +'<td>'+ aList[i].rate01 +'</td>' +'<td>'+ aList[i].rate02 +'</td>' +'<td>'+ aList[i].new_prize +'</td>' +'<td>'+ aList[i].high +'</td>' +'<td>'+ aList[i].date +'</td>' +'<td><input type="button" value="添加" ></td>' +'</tr>'; } $('.stock_list').html(sTr); } });
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:
在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat
在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson
json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat
在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans
更多关于jQuery相关内容还可查看本站专题:《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
- JQuery处理json与ajax返回JSON实例代码
- jquery的ajax异步请求接收返回json数据实例
- jQuery Ajax异步处理Json数据详解
- jQuery中使用Ajax获取JSON格式数据示例代码
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jsp中利用jquery+ajax在前后台之间传递json格式参数
- 详谈 Jquery Ajax异步处理Json数据.
- JQuery的ajax获取数据后的处理总结(html,xml,json)
- jquery ajax跨域解决方法(json方式)
- 浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
- jQuery使用ajax传递json对象到服务端及contentType的用法示例
相关文章
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的于是自己摸索了一个,接下来为大家介绍下实现的思路及代码,希望对你有所帮助2013-04-04Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基础上进一步修改,版权信息仅保留致谢信息,删除作者为了代码整体提示美观度,故将jQuery官方两位数版本变更为三位数版本2011-07-07
最新评论