http://code.jquery.com/jquery-1.7.1.min.js
案例:jQueryAjax load() 方法
load.html 源代码 客户端
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Ajax Demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" src="../js/jquery.js" />
</head>
<body>
<form action="" name="form" id="form">
<input type="text" name="username" id="username" value="zhang" />
<br>
<input type="text" name="psw" id="psw" value="999999" />
<br>
<input type="button" id="b1" value="登陆" />
</form>
<div id="one"></div>
<script language="JavaScript">
$().ready(function(){
$("b1").click(function(){
/*
load 方法的参数
第一个参数:请求的路径
第二个参数:发送到服务器的数据 数据形式为 key：value
多个数据表现形式 {key1:value1,key2:value2}
function(data,textStatus,xmlHttpRequest) 第三个参数:
代表请求返回内容的 data;
代表请求状态的textStatus对象
success,error,notmodify,timeout
XMLHttpRequest对象
*/
$("#one").load("load.jsp",{"username":$("#username").val(),"psw":$("#psw").val()}
,function(data,textStatus,xmlHttpRequest){
// 打印返回的内容
alert(data);
alert(textStatus);
alert(xmlHttpRequest.readyState+" "+xmlHttpRequest.status);
});
});
});
</script>
</body>
</html>load.jsp 源代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("psw"));
out.println("你好登陆成功");
%>jQuery Ajax 案例之 $.get() 方法
get.html 源代码 客户端
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Ajax Demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" src="../js/jquery.js" />
</head>
<body>
<form action="" name="form" id="form">
<input type="text" name="username" id="username" value="zhang" />
<br>
<input type="text" name="psw" id="psw" value="999999" />
<br>
<input type="button" id="b1" value="登陆" />
</form>
<div id="one"></div>
<script language="JavaScript">
$().ready(function(){
$("b1").click(function(){
/*
get方法的参数:通过远程HTTP GET请求载入信息
* 第一个参数:请求的路径
* 第二个参数:发送到服务器的数据key:value 多个参数{key1:value1,key2:value2}
* 第三个参数:function(data,textStatus)该函数有二个参数
* 第四个参数:方法返回值对象 XMLHttpRequest 对象
*/
$.get("get.jsp",{"username":$("#username").val(),"psw":$("#psw").val()},
function(data,textStatus){
alert(data+" "+textStatus);
$("#one").text(data);
}
);
// post与get方法是一样的
});
});
</script>
</body>
</html>get.jsp 源代码 服务端
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("psw"));
out.println("你好登陆成功");
%>jQuery Ajax Json 数据处理
json.html 源代码 客户端
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Ajax Demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" src="../js/jquery.js" />
</head>
<body>
<form action="" name="form" id="form">
<input type="text" name="username" id="username" value="zhang" />
<br>
<input type="text" name="psw" id="psw" value="999999" />
<br>
<input type="button" id="b1" value="登陆" />
</form>
<div id="one"></div>
<script language="JavaScript">
$().ready(function(){
$("b1").click(function(){
/*
getJSON方法的参数:通过远程HTTP GET请求载入JSON数据
* 第一个参数:请求的路径
* 第二个参数:发送到服务器的数据key:value 多个参数{key1:value1,key2:value2}
* 第三个参数:function(data,textStatus)该函数有二个参数
* 第四个参数:方法返回值对象 XMLHttpRequest 对象
* 使用getJSON此方法接收数据，不再对接收的数据进行处理
*/
$.getJSON("json.jsp",{"username":$("#username").val(),"psw":$("#psw").val()},
function(data,textStatus){
//alert(data);
for(var i=0;i<data.length;i++){
var pv = data[i];
alert(pv.id + " " + pv.name);
}
}
);
// post与get方法是一样的
});
});
</script>
</body>
</html>json.jsp 源代码 服务端
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("psw"));
out.println("[{id:1,name:'山东省'},{id:2,name:'山西省'}]");
%>jQuery Ajax 序列化元素 serialize() Demo
serialize.html 源代码 客户端
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Ajax Demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" src="../js/jquery.js" />
</head>
<body>
<form action="" name="form" id="form">
<input type="text" name="username" id="username" value="zhang" />
<br>
<input type="text" name="psw" id="psw" value="999999" />
<br>
<input type="button" id="b1" value="登陆" />
</form>
<div id="one"></div>
<script language="JavaScript">
$().ready(function(){
$("b1").click(function(){
/*
get方法的参数:通过远程HTTP GET请求载入JSON数据
* 第一个参数:请求的路径
* 第二个参数:发送到服务器的数据key:value 多个参数{key1:value1,key2:value2}
* 第三个参数:function(data,textStatus)该函数有二个参数
* 第四个参数:方法返回值对象 XMLHttpRequest 对象
* $("#form1").serialize() 将表单元素数据封转完毕
*/
$.get("serialize.jsp",$("#form1").serialize(),
function(data,textStatus){
//alert(data);
for(var i=0;i<data.length;i++){
var pv = data[i];
alert(pv.id + " " + pv.name);
}
}
);
// post与get方法是一样的
});
});
</script>
</body>
</html>serialize.jsp 源代码 服务端
<%@ page language="java" pageEncoding="UTF-8"%>
<%
System.out.println(request.getMethod());
System.out.println(request.getParameter("username"));
System.out.println(request.getParameter("psw"));
out.println("你好登陆成功");
%>Jquery 中的 Ajax
Jquery 对 Ajax 操作进行了封装，在Jquery中最底层的方法时$.ajax(),第二层是load,$.get()和$.getJSON()
load()方法
load()方法时jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中。他的结构式:load(url[,data][,callback])
参数名称 类型说明
url String请求HTML页面的URL地址
data(可选) Object 发送到服务器的key/value数据
callback(可选) Function 请求完成时的回调函数，无论请求成功或失败
程序员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的url作为参数传递给load()方法即可。
1.如果只需要加载目标HTML页面内的某些元素，则可以通过load()方法的URL参数来达到目的，通过URL参数指定选择符，就可以方便的从加载过来的HTML文档中选出所
需要的内容。load()方法的URL参数的语法结构为"url selector"(注意:url和选择器之间有一个空格)
2.传递方式:load()方法的传递参数根据参数data来自动自定。如果没有参数传递，采用GET方式传递，否则采用POST方式。
3.对于必须在加载完才能继续的操作，load()方法提供了回调函数，该函数有三个参数:代表请求返回内容的data；代表请求状态的 textStatus对象和XMLHttpRequest对象
4.方法的返回值是jQuery
$.get()或$.post()方法
$get()方法是用GET方式来进行异步请求，他的结构是:$get(url[,data][,callback][,type]);
参数名称 类型说明
url String请求HTML页面的URL
data(可选) Object 发送到服务器的key/value数据回座位QueryString附加到请求URL中
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是 success 才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器返回内容的格式，包括xml，html，script，jsin，text 和 _default
$get()方法的回调函数只有两个参数:data代表返回的内容，可以是xml文档，json文件，html片段等;textStatus代表请求状态，其值可能为:success,error,notmodify,timeout 4种.
方法的返回值:XMLHttpRequest对象
$.get()和$.post方法时jQuery中的全局函数，而find()等方法都是对jQuery对象进行操作的方法。
序列化元素
jQuery为准备"发送到服务器的 key/value 数据"提供了一个简化的方法:serialize().该方法作用于一个jQuery对象，能将DOM元素内容序列化为字符串，用于Ajax请求。
var xmlHpptReq = $.get("base01.jsp",{username:"aa",psw:"8888"});
var xmlHpptReq = $.get("base01.jsp",$("#form1").serialize());
使用 serialize() 方法可以自动完成对参数的URL编码
因为该方法作用于jQuery对象，所以不光只要表单能够使用，其他选择器选取元素也能使用它。
扫一扫
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
