当前位置:  首页  >  前端开发  >  Jquery

jquery教程(三)-jquery中的ajax

xmlHttp.onreadystatechange=callback;//执行成功的时候触发的回调函数

一.jquery中的ajax应用:语句简单,兼容性,缓存,.....

Jquery 中的ajax 应用

一.jquery中的ajax应用:语句简单,兼容性,缓存,.....

2.0 回忆一下以前手动开发ajax程序的语句

var xmlHttp=new XMLHttpRequest();

xmlHttp.open(‘get’,’demo01.php’);

xmlHttp.onreadystatechange=callback; //执行成功的时候  触发的回调函数

xmlHttp.send(null/data);

function callback(){

If(xmlHttp.readyState==4 && xmlHttp.status=200(

{}

}

3.0学习一下jquery中的ajax使用

  • jQuery.ajax(options)

实现了底层的ajax,表示的信息是最具体的

Options:json类型,表示ajax对象的所有信息

   async :指定请求是否是异步   默认: true:异步

   cache :是否缓存   默认: true:缓存

   complete :当ajax对象的readyState为4时所触发的回调函数

   contentType :发送数据的类型 application/x-www-form-urlencoded

   data :要发送的数据

   dataType :表示期望得到的数据类型(text,xml,json),默认是text

   success :当ajax对象的readyState为4和status为200时所触发的回调函数

   type :请求类型 get、post

   url :请求的服务器页面地址 

php教程
php教程
  • jQuery.get(url,[data],[callback]) 

实现ajax的get请求

url:表示请求的地址

[data]:表示请求时发送的数据   json类型的数据

[callback] :回调函数

  • jQuery.post(url,[data],[callback])

实现ajax的post请求

url:请求地址

[data]:发送的数据 json类型的数据

[callback]:回调函数

ajax

#p#jquery教程-jquery中的ajax#e#

二.关于复杂数据类型的传递

有时,我们需要在服务器端向客户端返回大批量数据,比如:多个人的信息,多个商品信息,这些可以使用以下几个技术来解决:

1.  xml

2.  json

2.1如何处理和接收xml数据

在$.ajax方法中,如果想接收服务器返回的xml格式的数据,必须要先设置dataType参数

  • 解析xml
  • var person=$(msg).find(“person”);
  • person.children(“name”).text()); 
  • person.children(“jian”).text());
  • person.children(“cheng”).text());
jquery

2.2 如何处理和接收json

php教程

2.3 页面中放一按钮,点击时将product表内所有数据取得到,并输出到表格中

php教程
php博客

2.4 补充

$.get和$.post接收服务器的xml或json数据类型该如何指定?

$.ajax({

Type

url

dataType:’xml’

});

$.get(url,[data],[callback],[dataType])

$.post(url,[data],[callback],[dataType]]); 

在$.get和$.post方法里,除了第一个参数之外,其它三个参数都是可选的

data:要传递的数据

如果我不想传递任何值

$.get(‘demo01.php’,function(msg){});  请求时不加任何参数

如果想接收到的是json或xml格式的数据,该如何指定???

$.get(‘demo01.php’,data,callback,’json’) 最终期望得json数据

$.get(‘demo01.php’,data,callback,’xml’) 期望得xml数据

php学习笔记

#p#jquery教程-jquery中的ajax#e#

三. jquery中的each语句的使用

each语句其实就是一个方法,通常用于解析js数组

each语法:

each(callback);

回调函数的格式:

function callback(i,item){

}

i:索引

item:数组当前元素

1、Each语句是一种循环结构语句,数组中有几个元素,each会遍历多少次

php教程 
php博客

  3.1 利用each解析xml

在服务器端返回多个人的信息,这些信息保存到了一个xml格式文档中,该如何解析?

$(msg).find(“person”).each(function(i,item){

$(item).children(“name”).text();

  $(item).children(“age”).text();

});

php教程

3.2 关于json数组的解析

3.2.1

$(msg).each(function(i,item){

item.id;

item.name;

item.age;

});

php学习笔记

3.2.2

var count=msg.length; //几个

for(var i=0;i

msg[i].id;

msg[i].name;

}

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有