JQuery中使用Ajax
2016-09-02 22:14
197 查看
JQuery 对 Ajax 操作进行了封装
在 jQuery 中最底层的方法时 $.ajax()第二层是 load(), $.get() 和 $.post()
第三层是 $.getScript() 和 $.getJSON()
load（）方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js">
</script>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div.visible {
display: none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang">
<br>
<input type="text" name="psw" id="psw" value="99999">
<br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
/*
* $(expr).load(url,data,callback)
* * url:请求路径,绝对路径或相对路径
* * data:请求参数,格式必须是key/value格式
* * callback:回调函数,function(data, textStatus, XMLHttpRequest){}
* * data:代表请求返回内容
* * textStatus:代表请求状态,值可能为: succuss, error, notmodify, timeout 4 种
* * XMLHttpRequest对象
*
* jQuery中封装Ajax操作
*
* load()方法的请求类型:
* * (默认情况下)在没有向服务器端发送请求数据的时候,load()方法的请求类型就是GET方式
* * 在向服务器端发送了请求数据的时候，load()方法的请求类型就是POST方法
* load()方法的问题:
* * load()不能自定义请求类型,而是由是否向服务器端发送请求数据
* * load()不能自定义数据交换格式,只能使用文本(HTML)格式
*/
var json = {
username : $("#username").val(),
psw : $("#psw").val()
}
$("#one").load("load.jsp",json,function(data, textStatus, XMLHttpRequest){
alert(data);
});
});
});
</script>
</html>load.jsp<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println("connection server success!");
System.out.println(request.getMethod());
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
out.println("helloworld!");
%>$.get() 和 $.post()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>get()方法和post()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
// /*
// * $.get(url,data,callback,type)
// * * url:请求路径
// * * data:请求参数,格式是key/value
// * * callback:回调函数,function(data, textStatus){}
// * * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
// * * textStatus:请求的状态,其值是success、error、notmodify、timeout等
// * * 返回值:XMLHttpRequest对象
// * * type:返回内容格式，xml, html, script, json, text, _default。
// *
// * $.get()方法的请求类型一定是GET方式
// */
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }
//
// $.get("getandpost.jsp",json,function(data, textStatus){
// //直接接收服务器端的响应数据格式为JSON格式
// console.info(data);
//
// //var json = eval("("+data+")");
// //console.info(json);
// });
/*
* $.post(url,data,callback,type)
* * url:请求路径
* * data:请求参数,格式是key/value
* * callback:回调函数,function(data, textStatus){}
* * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
* * textStatus:请求的状态,其值是success、error、notmodify、timeout等
* * 返回值:XMLHttpRequest对象
* * type:返回内容格式，xml, html, script, json, text, _default。
*
* $.post()方法的请求类型一定是POST方式
*/
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }
//序列化元素
var json = $("#form1").serialize();
$.post("getandpost.jsp",json,function(data, textStatus){
//直接接收服务器端的响应数据格式为JSON格式
console.info(data);
//var json = eval("("+data+")");
//console.info(json);
});
});
});
</script>
</html>getandpost.jsp<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println("conenction server success!");
System.out.println(request.getMethod());
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
//响应文本格式
//out.println("helloworld!");
//响应XML格式
//response.setContentType("text/xml");
//out.println("<china><province name='jilinsheng'></province></china>");
//响应JSON格式:jQuery提供的get()或post()方法时,数据格式为JSON格式时,只能使用第三方工具构建JSON格式的数据内容,不能使用手工方式
out.println("[{'province':'jilinsheng'},{'province':'liaoningsheng'},{'province':'shandongsheng'}]");
%>$.ajax()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax()方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username"
4000
id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
/*
* $.ajax(options)
* * options:(可选)
* * url:请求路径
* * type:请求类型
* * async:表示是否异步
* * data:发送到服务器端的请求数据,格式是key/value格式
* * success:表示Ajax异步交互请求成功后,回调函数(接收服务器端的响应)
* * function(data, textStatus){}
* * data:请求返回的数据内容
* * textStatus:表示请求的状态,值有success、error、notmodify、timeout等
* * error:表示Ajax异步交互请求失败后,回调函数
* function(XMLHttpRequest, textStatus, errorThrown){}
* XMLHttpRequest对象
* textStatus:表示请求的状态,值有success、error、notmodify、timeout等
* errorThrown:异常对象
* * 返回值:XMLHttpRequest对象
*/
var json = {
username : $("#username").val(),
psw : $("#psw").val()
}
$.ajax({
url : "ajax.jsp",
type : "get",
async : true,
data : json,
success : function(data, textStatus){
alert(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("请求错误啦。。。");
}
});
});
});
</script>
</html>ajax.jsp<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println("connection server success!");
System.out.println("username = "+request.getParameter("username"));
System.out.println("password = "+request.getParameter("psw"));
out.println("helloworld");
%>$.getScript() 方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getScript()方法</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
.block{width:80px;height:80px;background:#DDD;}
</style>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
<script type="text/javascript">
$(function(){
$('#send').click(function() {
/*
* $.getScript(url,callback)
* * url:请求路径,可以是绝对路径和相对路径
* * callback:回调函数
*/
$.getScript('test.js');
});
})
</script>
</html>test.jsvar comments = [
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
];
var html = '';
$.each( comments , function(commentIndex, comment) {
/*
* JSON格式中的kye/value格式的调用:
* * json.key
* * json['key']
*/
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);$.getJSON()方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getJSON()方法</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
.block{width:80px;height:80px;background:#DDD;}
</style>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
<script type="text/javascript">
$(function(){
$('#send').click(function() {
/*
* $.getJSON(url,data,callback)
* * url:请求路径
* * ".json"文件:专门用来存储符合JSON格式的数据内容,当作一个文本文档
* * data:请求参数
* * callback:回调函数,function(data){}
* * data:表示请求返回的内容
*/
$.getJSON("test.json",function(data){
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
});
})
})
</script>
</html>test.json[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 jQuery 简化 Ajax 开发(转载）
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- Ajax 改造，第 1 部分：使用 Ajax 和 jQuery 改进现有站点
- 使用 jQuery 简化 Ajax 开发
- 使用JQuery快速实现Tab的AJAX动态载入
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- Jquery使用手册7--Ajax支持 作者:choy
- 使用 jQuery 简化 Ajax 开发.
- 使用 jQuery 简化 Ajax 开发(转摘)
- 使用 jQuery 简化 Ajax 开发
- 使用 jQuery 简化 Ajax 开发
- 浅析jQuery ------使用jQuery简化AJAX开发
- 使用 jQuery 简化 Ajax 开发
- 开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏——jPagerBar-1.1.1
- Ajax 改造，第 2 部分: 使用 jQuery、Ajax、工具提示和 lightbox 改进现有站点