<!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>
