jQuery Ajax 案例 Demo

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對象，所以不光只要表單能夠使用，其他選擇器選取元素也能使用它。

jQuery Ajax 案例 Demo

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

使用docker-compose搭建FastDFS

使用docker-compose一鍵搭建Redis集羣

快速安裝 Docker Compose

DOM4J中文編碼解決

修改 Logback FixedWindowRollingPolicy 最多支持20個文件限制

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結