<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-3.1.0.js"></script> </head> <body> <!--ajax jQuery对Ajax操作进行了封装 %.ajax() 最底层的方法 load get post 第2层的方法(用得比较多) 注意:get post,是全局函数 $.get 这样就能调用 getScript getJSON 第三次方法 --> <!--load--> <!-- 载入远程HTML代码,并插入DOM中 load(url [,data] [,callBack]) url:请求HTML页面的URL地址 data:发送给服务器的key/value数据,是Object格式的 callback:回调函数,无论请求成功还是失败 load方法的参数传递方式根据data来自动指定,如果没有参数传递,采用GET方式,反之,则自动转换为POST方式 一个完整的load $("").click(function(){ $("").load("url",{k1:v1,k2:v2},function(){}) }) 关于回调函数,其有3个参数,分别是 返回内容 请求状态 XMLRequest对象 load一般用来从服务器获取静态数据文件 --> <input type="button" id="send" value="Ajax获取" /> <div class="comment">已有评论</div> <div id="resText"></div> <script type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("006_demo_01.html"); //对于url,不仅仅可以是一个请求地址,还可以带上选择器 //$("#resText").load("006_demo_01.html .className"); }) }) </script> <!--get--> <!-- get方法使用GET方式来进行异步请求 get(url [,data] [,callback] [,type]) 参数说明: 请求地址 发送数据 回调函数 服务端返回内容格式:xml script json text _default 举例: HTML数据的返回,可以直接显示在页面上 $("").click(function(){ $.get("请求地址" ,{ username:$("#username").val() ,password:$("#password").val() } ,function(data,textStatus){ $("#resText").html(data);//将返回的数据添加在页面上 }) }) XML数据的返回处理 就是回调函数在处理的时候有些区别 $(data).find("comment").attr("username"),这样获取XML数据中的值 JSON数据的返回处理 首先在请求的时候,声明服务端返回的是json数据 通过点的方式就能够获取JSON中的数据 如:username = data.username --> <!--post--> <!-- post的使用与get相同 区别: get请求会将参数添加在url后面,post请求会将参数封装在http消息的实体内容 get方式对传输有大小限制,通常不超过2k get请求参数会被缓存起来,不安全 两种请求方式,在服务端的获取方式是不同的 --> <!--getScript--> <!-- 有时候在页面初次加载的时候就获取全部的js文件是没有必要的 $.getScript("test.js"); --> <!--getJSON--> <!-- $.getJSON用于加载JSON文件 $.getScript("test.json",function(data){ //处理 }); --> <!--以上能够实现基本的Ajax操作,如果想要实现复杂的Ajax操作,就需要用到$.ajax方法了--> <!-- $.ajax(options) 需要的所有参数都在options中,options是一个键值对 序列化元素 提交表单数据,如果使用键值对的形式手动设置,太麻烦了,可以使用序列化,提交整个表单 $("#form1").serialize(),把整个作为ajax的请求参数即可 请求参数还可以是字符串的形式,和url中添加请求参数一样.但此时要注意编码 对于表单,推荐使用序列化元素提交,少量数据,使用对象方式提交,字符串形式个人不推荐 serializeArray:$(":checkbox").serializeArray();//将DOM元素序列化后转化成JSON格式的数据 $.param() $.param({a:1,b:2})-->a=1&b=2 --> <!-- Ajax全局事件 开始ajax请求的时候,ajaxStart()方法的回调函数被触发 结束ajax请求的时候,ajaxStop()方法的回调函数被触发 ajaxStart()一般用于提示加载信息 ajaxComplete() 请求完成时执行 ajaxError() 请求失败时执行 ajaxSend() 请求发送前执行 ajaxSuccess() 请求成功时执行 如果不想触发全局事件,可以使用$.ajax()中设置global:false --> </body> </html>