jQuery高级编程之js对象、json与ajax用法实例分析


Posted in jQuery onNovember 01, 2019

本文实例讲述了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和空。

jQuery高级编程之js对象、json与ajax用法实例分析

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);
  }
});

jQuery高级编程之js对象、json与ajax用法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
You might like
追求程序速度,而不是编程的速度
2008/04/23 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php验证码生成器
2017/05/24 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
创建Django项目图文实例详解
2019/06/06 Python
OpenCV 模板匹配
2019/07/10 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python多任务之协程的使用详解
2019/08/26 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python3列表List入门知识附实例
2020/02/09 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
党员演讲稿
2014/09/04 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
总结高并发下Nginx性能如何优化
2021/11/01 Servers
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技