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 实现表单验证功能
Jul 05 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jquery插件实现代码雨特效
Apr 24 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
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
pandas数值计算与排序方法
2018/04/12 Python
python中with用法讲解
2020/02/07 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
MYSQL基础面试题
2012/05/13 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
高中生自我鉴定范文
2013/10/30 职场文书
学生自我鉴定模板
2013/12/30 职场文书
施工员岗位职责
2014/03/16 职场文书
三峡导游词
2015/01/31 职场文书
认真学习保证书
2015/02/26 职场文书
工作简报格式范文
2015/07/21 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
浅谈Python中的正则表达式
2021/06/28 Python