您的位置：首页 > Web前端 > JQuery

jQuery之ajax

2016-02-22 10:43 579 查看

传统的Javascript

传统的ajax方法，采用传递XmlHttp

示例：

a.html请求b.html的例子，a.html获取 b.html中的

*姓名：陶国荣

性别：男

邮箱：tao_guo_rong@163.com*

a.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size:13px
}
.divFrame{
width:260px;
border:solid 1px #666
}
.divFrame .divTitle{
padding: 5px;
background-color: #eee;
}
.divFrame .divContent{
padding:8px;
}
.divFrame.divContent.clsShow{
font-size: 14px;
}
.btn{
border:#666 1px solid;
padding: 2px;
width: 80px;
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,startColorStr=#ffffff,endColorStr=#ECE9D8);
}
</style>
<script type="text/javascript">
var objxmHttp=null //objxmHttp作为一个外部变量
//创建XMLHTTP
function CreateXMLHTTP(){
if(window.ActiveXObject){
objXmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
else{
if(window.XMLHttpRequest){
objXmlHttp=new XMLHttpRequest()
}
else{
alert("初始化XMLHTTP错误！")
}
}
}
function GetSendData(){
document.getElementById("divTip").innerHTML="<img alt='' title='正在加载中.....' src='image/Loading.gif'/>"
var strSendUrl='b.html?date='+Date()
CreateXMLHTTP() //创建XMLHTTP
objxmHttp.open("GET",strSendUrl,true)//请求获取b.html中的内容
objxmHttp.onreadystatechange=function(){
if(objxmHttp.readyState==4){
if(objxmHttp.status==200){
//将b.html中的内容添加到a.html中      document.getElementById("divTip").innerHTML=objxmHttp.responseText
}
}
}
objxmHttp.send(null)
}
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>


b.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="clsShow">
姓名：陶国荣<br/>
性别：男<br/>
邮箱：tao_guo_rong@163.com
</div>
<div>
<img src="image/loading.gif">
</div>
</body>
</html>


jQuery方法

方法描述
$.ajax()执行异步 AJAX 请求
$.ajaxPrefilter()在每个请求发送之前且被Ajax处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup()为将来的 AJAX 请求设置默认值
$.ajaxTransport()创建处理 Ajax 数据实际传送的对象
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()规定 AJAX 请求完成时运行的函数
ajaxError()规定 AJAX 请求失败时运行的函数
ajaxSend()规定 AJAX 请求发送之前运行的函数
ajaxStart()规定第一个 AJAX 请求开始时运行的函数
ajaxStop()规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()规定 AJAX 请求成功完成时运行的函数
load()从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()编码表单元素集为字符串以便提交
serializeArray() 编码表单元素集为 names 和 values 的数组
jQuery在Ajax上面变得非常好用

$.getJSON()

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type="text/css">
<title></title>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
$.getJSON("UserInfo.json",function(data){
$("#divTip").empty()
var strHTML="";
console.log(data)
$.each(data,function(infoIndex,info){
strHTML+="姓名："+info["name"]+"<br>"
strHTML+="性别："+info["sex"]+"<br>"
strHTML+="邮箱："+info["email"]+"<hr>"
})
$("#divTip").html(strHTML)
})
})
})
</script>
</html>


json文件

var data=[
{
"name":"陶国荣",
"sex":"男",
"email":"tao_guo_rong@163.com"
},
{
"name":"李建周",
"sex":"女",
"email":"li_jian_zhou@163.com"
}
]
var strHTML=""
$.each(data,function(){
strHTML+="姓名"+this["name"]+"<br>"
strHTML+="性别"+this["sex"]+"<br>"
strHTML+="邮箱"+this["email"]+"<hr>"
})
$("#divTip").html(strHTML)


$.getScript()

仅仅需要这么一行代码而已

$(function(){
$("#Button1").click(function(){
$.getScript("UserInfo.js")
})
})


$.get()

请求“UserInfo.aspx”的信息

$(function(){
$("#Button1").click(function(){
$.get("UserInfo.aspx",
{name:encodeURI($("txtName").val())},function(data){
$("#divTip").empty().html(data)
})
})
})


$.load()

$(function(){
$("#Button1").click(function(){
$("#divTip").load("b.html")
})
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航