jQuery Ajax 案例 Demo

电玩女神 2022-06-16 10:53 212阅读 0赞

[jQuery 下载地址][jQuery]

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 源代码 服务端

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 源代码 服务端

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 源代码 服务端

Jquery 中的 Ajax  
Jquery 对 Ajax 操作进行了封装，在Jquery中最底层的方法时$.ajax(),第二层是load,$.get()和$.getJSON()

load()方法  
load()方法时jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中。他的结构式:load(url\[,data\]\[,callback\])  
参数名称类型说明  
urlString请求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\]);  
参数名称类型说明  
urlString请求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对象，所以不光只要表单能够使用，其他选择器选取元素也能使用它。

[jQuery]: http://code.jquery.com/jquery-1.7.1.min.js