JQuery实现Ajax
一、ajax
1.什么是ajax
什么是Ajax:
是指一种创建交互式网页应用的网页开发技术
是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
简而言之: 就是异步无刷新的获取数据的一种技术
2.ajax实现的方法
1.load() 方法从服务器加载数据，并把返回的数据放入被选元素中
语法:$(selector).load(URL,data,callback);
参数：
必需的 URL 参数规定您希望加载的 URL：统一资源定位符，可以简单的
理解为是网址。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合：请求时
传递的一个参数
可选的 callback 参数是 load() 方法完成后所执行的函数名称
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX获取外部数据信息</title>
<script src="../js/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("123.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
备注:你需要先创建一个123.txt,并在里面写一些内容
2.jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据
两种在客户端和服务器端进行请求-响应的常用方法是: GET和POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET基本上用于从服务器获得（取回）数据。
注释：GET 方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST 方法不会缓存数据，
并且常用于连同请求一起发送数据
2.1) . 通过JQuery实现Ajax
基本原理: 通过jquery实现Ajax
1)在页面引入jquery.js文件
2）在相应的位置使用即可
需求:
按钮点击使用 ajax进行异步请求
请求回来的数据进行解析
将数据渲染成列表显示到页面中
http请求:
get():获取数据
post()提交数据
状态码:
4xx 请求出了问题，提供参数，路径有问题， 假如我将文件修
改为movie_list.json123，那么此时就会出现错误的状态码404
5xx 服务器内部逻辑，需要开发人员自行修复bug
3xx 请求转发
200 正常
步骤:
1) 因为没有后台程序，所以此时我们用一个.json文件来充当数据来源
（即是movie_list.json），并且将该文件引入到项目中
2) 在页面中通过$.getJson来获取数据（因为我是要从.json文件中获取数据的）
$.getJson():通过 HTTP GET 请求载入JSON数据。
语法：jQuery.getJSON(url, [data], [callback])
参数：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数
3）在<body>中创建元素，且进行显示
<input type="text" value="" name="" />
<input type="button" id="get_movies" value="获取电影列表"" />
<div id="container">
<!--用来展示图片的-->
<div class="item">
<img src="" width="200px" height="200px"/>
<p>人行天地间，忽如远行客</p>
</div>
</div>
4) 对创建好的元素进行样式的设定
img{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
p{
height: 200px;
line-height: 200px;
float: left;
text-align: center;
margin: 0px;
padding: 0px;
}
.item{
border: 1px solid blue;
height: 204px;
padding: 1px;
}
5）在页面上引人jquery开始写ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery.js" ></script>
<style type="text/css">
img{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
p{
height: 200px;
line-height: 200px;
float: left;
text-align: center;
margin: 0px;
padding: 0px;
}
.item{
border: 1px solid blue;
height: 204px;
padding: 1px;
}
</style>
<script type="application/javascript">
$(document).ready(function(){
$("#get_movies").click(function (){
alert("开始ajax");
$.getJSON("movie_list.json",function(data){
alert(data.movies[0].img);
alert("data.movies.length:"+data.movies.length);
for (var i = 0; i < data.movies.length; i++){
var $img=$("<img src='../img/02.jpg' width='200px'
height='200px' />")
var $p= $("<p></p>")
//给img标签设置src属性值
$img.attr("src",data.movies[i].img);
//给p标签设置文本值
$p.text(data.movies[i].tittle)
//创建一个div标签
var $item=$("<div class='item'></div>")
//将新创建的img标签和段落p标签追加到新创建的div标签中
$item.append($img).append($p)
//将div追加到id值为container的div中
$("#container").append($item)
}
});
});
});
</script>
</head>
<body>
<input type="text" value="" name="" />
<input type="button" id="get_movies" value="获取电影列表"" />
<div id="container">
<!--用来展示图片的-->
<div class="item">
<img src="" width="200px" height="200px"/>
<p>人行天地间，忽如远行客</p>
</div>
</div>
</body>
</html>
3.ajax应用举例
1.实现Ajax的方法：
1）第一种用XHR对象创建：已经过时了，不推荐使用
2）使用Jquery实现
2.Jquery实现Ajax的方法又分为很多种，但是常用的有以下4种；
1） $.post(url,params,callback); 第一种:采用post方式提交，
中文参数无需转码，在callback中如果要获取json字符串，还需转换一下
示意代码：
alert("开始请求Ajax");
var gname=$("#gname").val();
alert("管理员姓名："+gname);
var url="<%=request.getContextPath() %>/manager.do?method=queryAjax";
alert("请求的URl："+url);
$.post(url,{manager_name:gname},function (data){
alert("data:"+data);
tianxie(data);
});
2）$.getJSON(url,params,callback); getJSON采取get方式提交，
所以如果你的params参数里面有中文的话，请先转码，否则会出现乱码提交到后台
示意代码：
$.getJSON(url,param,function(jsondata){
这里返回的jsondata可以直接取不用再转换了。
如：jsondata[0].nuclide
}
url是必选参数，表示json数据的地址；
param是可选参数，用于请求数据时发送数据参数；
callback是可参数，这是一个回调函数，用于处理请求到的数据。
3）$.ajax(); 这种方式最灵活，但是需要写的东西由点小多
示意代码：
$.ajax({
url: url,//地址
data: data,//参数
type: 'POST',//提交方式 可以选择post/get 推荐post
async: false,//同步异步
dataType: 'json',//返回数据类型
success:function(data){
accidentList = data.list;
//这里可以直接取data里面的数据了，因为设置返回值为json方式。
}
});
4. ）$.load(url,params,callback); 从服务器加载数据，并把返回的数据放入被选元素中
示意代码：
/data为发送的key/value数据，可选填
//callback为请求完成的回调函数，可选无论请求成功或失败都会调用
$('xxx').load('zyf.html',data,callback);
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
