2. 程式人生 > >Ajax && Jquery&&百度搜索提示&&JQuery實現省市聯動

Ajax && Jquery&&百度搜索提示&&JQuery實現省市聯動

阿新 • • 發佈：2019-01-05

                                              Ajax

 是什麼?

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術 ， 它並不是一種新的技術

ajax並非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。

   1.使用CSS和XHTML來表示。

   2. 使用DOM模型來互動和動態顯示。

   3.使用XMLHttpRequest來和伺服器進行非同步通訊。

   4.使用javascript來繫結和呼叫。

在上面幾中技術中，除了XmlHttpRequest物件以外，其它所有的技術都是基於web標準並且已經得到了廣泛使用，XMLHttpRequest雖然目前還沒有被W3C所採納，但是它已經是一個事實的標準，因為目前幾乎所有的主流瀏覽器都支援它。

 有什麼用?

傳統的網頁，如果需要更新內容，必須載入整個網頁。 如果只需要對網頁上的某個內容進行區域性重新整理， 那麼就需要使用到Ajax了。 它可以讓我們無需重新載入全部網頁內容，即可完成對某個部分的內容執行重新整理 。 最典型的的例子， 莫過於大家在註冊網站的時候， 輸入的使用者名稱，會自動的提示我們，該使用者已被註冊。

AJAX - 向伺服器傳送請求：

get方法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 使用Ajax演示get方法 -->
	<script type="text/javascript">
	
		//1.獲取XMLHttpRequest的物件
		function ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
			return xmlHttp;
 		}
	
		//2.執行get請求
		function get() {
			//1.建立XMLHttpRequest的物件
			var request=ajaxFunction();
			//2.傳送請求
			/*	
			引數一： 請求型別  GET or  POST
			引數二： 請求的路徑
			引數三： 是否非同步， true  or false
			*/
			request.open("GET","DemoServlet01?name=zhangsan&age=18",true);
			
			//3. 獲取響應資料 註冊監聽的意思。  一會準備的狀態發生了改變，那麼就執行 = 號右邊的方法
			request.onreadystatechange=function()
			  {
				//前半段表示 已經能夠正常處理。  再判斷狀態碼是否是200
			  if (request.readyState==4 && request.status==200)
			    {
				  //彈出相應的資訊
			    alert(request.responseText);
			    }
			  }
			request.send();
		}
	</script>
</head>
<body>
	<h2><a href=" " onclick="get()" >這是一個get請求</a></h2>
</body>
</html>

Post方法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<!-- 使用Ajax演示post方法 -->
	<script type="text/javascript">
	
	//1.獲取XMLHttpRequest的物件
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
		}
	
	//2.提交物件
	function post() {
		//獲取XMLHttpRequest物件
		var request=ajaxFunction();
		//2.傳送請求
		request.open("POST","DemoServlet01",true);
		
		//想獲取伺服器傳送過來的資料， 加一個狀態的監聽。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				alert("post："+request.responseText);
			}
		}
		//3.帶上引數 ，如果使用的是post方式帶資料，那麼 這裡要新增頭， 說明提交的資料型別是一個經過url編碼的form表單資料
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//4.傳送
		request.send("name=Bill&age=18");
	}
	</script>
</head>
<body>
	<h2><a href="" onclick="post()">這是一個post請求</a></h2>
</body>
</html>

伺服器響應：

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

responseText 獲得字串形式的響應資料。
responseXML 獲得 XML 形式的響應資料。

onreadystatechange 事件

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態資訊。

下面是 XMLHttpRequest 物件的三個重要的屬性：

屬性 描述
onreadystatechange 儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

  • 0: 請求未初始化
  • 1: 伺服器連線已建立
  • 2: 請求已接收
  • 3: 請求處理中
  • 4: 請求已完成，且響應已就緒
status

200: "OK"

404: 未找到頁面

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

  • 無法使用快取檔案（更新伺服器上的檔案或資料庫）
  • 向伺服器傳送大量資料（POST 沒有資料量限制）
  • 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

例項：校驗使用者密碼

前端頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
	//使用ajax演示使用者名稱校驗
	
		//1.獲取XMLHttpRequest的物件
		function ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
			return xmlHttp;
			}
	
		//2.提交物件
		function checkUserName() {
			//1.獲取輸入框的內容
			var name=document.getElementById("name").value;
			//2.建立XMLHttpRequest物件
			var xmlHttp=ajaxFunction();
			
			//傳送資料到伺服器
			xmlHttp.open("POST","/AjaxDemo01/CheckUserNameServlet",true);
			
			//獲取伺服器發來的資料，註冊監聽
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.readyState==4 && xmlHttp.status == 200){
					
					var rs=xmlHttp.responseText;
					if(rs==1)
						document.getElementById("span01").innerHTML="<font color='red'>使用者名稱已存在！</font>";
					else 
						document.getElementById("span01").innerHTML="<font color='green'>使用者名稱可用</font>";	
				}	
			}
			//3.帶上引數 ，如果使用的是post方式帶資料，那麼 這裡要新增頭， 說明提交的資料型別是一個經過url編碼的form表單資料
			xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//4.傳送
			xmlHttp.send("name="+name);
		}
	
	</script>

</head>
<body>
	<TABLE>
		<TR>
			<TD>使用者名稱:</TD>
			<TD><INPUT TYPE="text" NAME="name" id="name" onblur="checkUserName()"><span id="span01"></span></TD>
		</TR>
		<TR>
			<TD>密碼：</TD>
			<TD><INPUT TYPE="text" NAME="psw"></TD>
		</TR>
		<TR>
			<TD>郵箱：</TD>
			<TD><INPUT TYPE="text" NAME="mail"></TD>
		</TR>
		<TR>
			<TD>簡介：</TD>
			<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
		</TR>
		<tr>
			<td colspan="2"><input type="submit" value="註冊"></td>
		</tr>
	</TABLE>
</body>
</html>

用於檢查使用者名稱的Servlet：

public class CheckUserNameServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1.用於檢查使用者名稱
			String name = request.getParameter("name");
			System.out.println("name="+name);
			UserDao dao=new UserDaoImpl();
			boolean isExist = dao.checkUserName(name);
			
			//2.通知頁面，是否有該使用者名稱
			if (isExist) {
				response.getWriter().println(1);//有該使用者
			} else {
				response.getWriter().println(2);//未有該使用者
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

Dao實現：

public class UserDaoImpl implements UserDao {

	public boolean checkUserName(String name) throws SQLException {
		
		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		String sql="select count(*) from t_suer where username =?";
		Long resault = (Long) runner.query(sql, new ScalarHandler(),name);
		return resault>0;
	}
}

   

                                         JQuery

是什麼?

javascript 的程式碼框架。 

有什麼用?

簡化程式碼，提高效率。write less do more , 寫得更少，做的更多。

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。

語法：

$(selector).load(URL,data,callback);

例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	function show() {
			
		//找到這個元素， 去執行載入的動作， 載入/day16/DemoServlet02 ， 得到的資料，賦值顯示
		$("#aaa").load("/AjaxDemo01/DemoServlet02" , function(responseText , statusTXT  , xhr) {
				//找到id為text01的元素， 設定它的value屬性值為 responseText 對應的值
				$("#aaa").val(responseText);
			}); 
	}
	</script>	
</head>
<body>
	<input type="button" value="使用jQuery演示load方法" onclick="show()"/>
	<input type="text" id="aaa">
</body>
</html>

HTTP 請求：GET vs. POST

兩種在客戶端和伺服器端進行請求-響應的常用方法是：GET 和 POST。

  • GET - 從指定的資源請求資料
  • POST - 向指定的資源提交要處理的資料

GET 基本上用於從伺服器獲得（取回）資料。註釋：GET 方法可能返回快取資料。

POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料。

get() 方法

$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。

語法：

$.get(URL,callback);

必需的 URL 引數規定您希望請求的 URL。

可選的 callback 引數是請求成功後所執行的函式名。

例項：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		function get() {
			$.get("/AjaxDemo01/DemoServlet02?name=zhangsan&age=18"  , function(data ,status) {
				$("#div01").text(data);
			});
		}
	</script>
</head>
<body>
	<input type="button" value="使用jQuery演示get方法" onclick="get()"/>
	<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
	</div>
</body>
</html>

post方法：

$.post() 方法通過 HTTP POST 請求從伺服器上請求資料。

語法：

$.post(URL,data,callback);

必需的 URL 引數規定您希望請求的 URL。

可選的 data 引數規定連同請求傳送的資料。

可選的 callback 引數是請求成功後所執行的函式名。

賦值顯示

 val("aa"); ---只能放那些標籤帶有value屬性
 html("aa"); ---寫html程式碼
 text("aa");

 其實沒有什麼區別，如果想針對這分資料做html樣式處理，那麼只能用html()

例項：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		function post() {
			$.post("/AjaxDemo01/DemoServlet02",{name:"zhangsan",age:18}, function(data ,status) {
				$("#div01").html(data);
			});
		}
	</script>
</head>
<body>
	<input type="button" value="使用jQuery演示post方法" onclick="post()"/>
	<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
	</div>
</body>
</html>

使用JQuery校驗使用者名稱

前端頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	//使用jQuery演示使用者名稱校驗
		function checkUserName() {
			//1.獲取輸入框的資料
			var name=$("#name").val();
			//2.傳送請求給伺服器
			$.post("/AjaxDemo01/CheckUserNameServlet",{name:name},function(data ,status){
				if (data==1) {
			//3.輸出到頁面上
					$("#span01").html("<font color='red'>使用者名稱已被註冊</font>");
				} else {
					$("#span01").html("<font color='green'>使用者名稱可以使用</font>")
				}
			})
		}
	</script>

</head>
<body>
	<TABLE>
		<TR>
			<TD>使用者名稱:</TD>
			<TD><INPUT TYPE="text" NAME="name" id="name" onblur="checkUserName()"><span id="span01"></span></TD>
		</TR>
		<TR>
			<TD>密碼：</TD>
			<TD><INPUT TYPE="text" NAME="psw"></TD>
		</TR>
		<TR>
			<TD>郵箱：</TD>
			<TD><INPUT TYPE="text" NAME="mail"></TD>
		</TR>
		<TR>
			<TD>簡介：</TD>
			<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
		</TR>
		<tr>
			<td colspan="2"><input type="submit" value="註冊"></td>
		</tr>
	</TABLE>
</body>
</html>

後端通前面Ajax的一樣。。。

 實現百度搜索提示：jaxDemo02baidu

前端頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/qiandu.js"></script>
</head>
<body>
	<center>
	<h2>千度</h2>
		<input type="text" name="word" id="word" style="width: 600px;height: 50px;font-size: 20px;">	
		<input type="button" value="揪一下" style="width: 100px;height: 50px;"/>
		<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
	</center>
</body>
</html>

js部分：

/**
 * 捕捉鍵盤彈起事件
 * 在文件準備就緒的時候，對某一個元素進行onkeyup事件監聽
 */
$(function() {
	$("#word").keyup(function() {
		//1.獲取輸入的值
		var word=$("#word").val();
		//2.請求資料
			if (word=="") {//頁面無輸入時,隱藏提示框
				$("#div01").hide();
			} else {//頁面有輸入時，根據查詢伺服器的資料，在提示框顯示
				$.post("FindWordServlet",{word:word},function(data,status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
				});
			}
	})
});

用於處理頁面請求的Servlet :

public class FindWordServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.獲取頁面資料
			String word = request.getParameter("word");
			System.out.println("word="+word);
			//2.執行查詢
			WordsDao dao=new WordsDaoImpl();
			List<WordBean> list = dao.findWord(word);
			//3.返回資料
			response.setContentType("text/html;charset=utf-8");
//			response.getWriter().write("資料是:");
			//存值
			request.setAttribute("list", list);
			//返回一個頁面，把list.jsp上的內容返回給頁面
			request.getRequestDispatcher("list.jsp").forward(request, response);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

list.jsp頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<table style="width: 100%">
	<c:forEach items="${list }" var="w">
		<tr>
			<td>
				${w.word }
			</td>
		</tr>
	</c:forEach>
</table>

封裝查詢結果的bean:

public class WordBean {
	private int id;
	private String word;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getWord() {
		return word;
	}
	public void setWord(String word) {
		this.word = word;
	}
}

dao實現：

public class WordsDaoImpl implements WordsDao {

	public List<WordBean> findWord(String word) throws SQLException {

		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		return runner.query("select * from word where word like ? limit ?", 
				new BeanListHandler<WordBean>(WordBean.class),word+"%",5);
	}
}

 使用JQuery實現省市聯動：

前端頁面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 這是使用xml的方式 
<script type="text/javascript" src="js/city_xml.js"></script>
-->

<!-- 這是使用json-->
<script type="text/javascript" src="js/city_json.js"></script>

</head>
<body>
	省份：<select name="province" id="province">
			<option value="">-請選擇-
			<option value="1">陝西
			<option value="2">四川
			<option value="3">廣州
		</select>
	城市：<select name="city" id="city">
			<option value="">-請選擇-
		</select>
</body>
</html>

1.使用XML格式傳輸資料

js程式碼：

/**
 * 用xml的方式省市聯動
 */
$(function () {
//1.找到省份的元素
	$("#province").change(function() {
		//2.獲取省份的pid
		var pid=$(this).val();
		$.post("CityServlet",{pid:pid},function(data,status){
			
			//清空之前的值
			$("#city").html("<option value=''>-請選擇-");
			//從data資料裡面找出所有的city  ， 然後遍歷所有的city。
			//遍歷一個city，就執行一次function方法data裡面找出所有的city，然後遍歷
			$(data).find("city").each(function() {
				
				//遍歷出來的每一個city，取它的孩子.  id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		});
	});
});

使用XML格式的Servlet：

public class CityServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.獲取頁面提交的省份pid
			int pid = Integer.parseInt(request.getParameter("pid"));
			//2.根據pid查詢城市
			CityDao dao=new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3.把資料返回到頁面--->>XStream 轉化bean對物件為xml;
			XStream xStream=new XStream();
			//把id變成屬性
//			xStream.useAttributeFor(CityBean.class, "id");
			//設定別名
			xStream.alias("city", CityBean.class);
			//把list集合轉化成一個xml字串
			String xml = xStream.toXML(list);
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			 
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

2.使用json格式傳輸資料

js程式碼：

$(function () {
//1.找到省份的元素
	$("#province").change(function() {
		//2.獲取省份的pid
		var pid=$(this).val();
		$.post("CityServlet2",{pid:pid},function(data,status){
			//清空之前的值
			$("#city").html("<option value=''>-請選擇-");
			
			//遍歷,追加
			$(data).each(function(index,c) {
				$("#city").append("<option value='"+c.id+"'>"+c.cname);
			});
		},"json");
	});
});

使用Json格式的Servlet ：

public class CityServlet2 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.獲取頁面提交的省份pid
			int pid = Integer.parseInt(request.getParameter("pid"));
			//2.根據pid查詢城市
			CityDao dao=new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3.把list轉成json資料
			//JSONArray-->>變成陣列或集合 []
			//JSObject-->>變成普通資料 {}
			JSONArray jsonArray=JSONArray.fromObject(list);
			String json = jsonArray.toString();
			//4.傳送資料給頁面

			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);

		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

 用於封裝城市查詢結果的bean：

public class CityBean {
	
	private int id;
	private int pid;
	private String cname;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
}

用於根據省份id查詢城市的dao：

public class CityDaoImpl implements CityDao {

	public List<CityBean> findCity(int pid) throws SQLException {
		
		QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
		return runner.query("select * from city_province where pid=?",
				new BeanListHandler<CityBean>(CityBean.class),pid);
	}
}

XStream的使用:轉化 bean物件成 xml

                       // XStream  轉化 bean物件成 xml
			XStream xStream = new XStream();
			
			//想把id做成屬性
			xStream.useAttributeFor(CityBean.class, "id");
			
			//設定別名
			xStream.alias("city", CityBean.class);
			
			//轉化一個物件成xml字串
			String xml = xStream.toXML(list);

轉化bean物件成json

			//3.把list轉成json資料
			//JSONArray-->>變成陣列或集合 []
			//JSObject-->>變成普通資料 {}
			JSONArray jsonArray=JSONArray.fromObject(list);
			String json = jsonArray.toString();

伺服器和客戶端資料傳輸的方式

xml：

  	<list>
  			<city>
  				<id>1<id>
  				<pid>1</pid>
  				<cname>深圳</cname>
  			</city>
  			<city >
  				<id>2<id>
  				<pid>1</pid>
  				<cname>東莞</cname>
  			</city>
  		</list>

Json：閱讀性更好 、 容量更小。

  {"name":"aaa" , "age":19}

 

 

 

相關推薦

Ajax &amp;&amp; Jquery&amp;&amp;百度搜索提示&amp;&amp;JQuery實現省市聯動

                                          &nb

百度搜索聯想功能（jquery）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

案例：實現百度搜索提示

分析：在輸入框中輸入詞彙後，提示出以該關鍵字開頭的存在資料庫中的記錄 一、搭建環境 1、定義首頁 <body> <center> <input type="text" name="word" id="word" style="width: 600

類似百度搜索下拉框的實現

從百度截圖如下：要實現的功能與該圖類似，只不過沒有詳細優化樣式。哈哈，大家不要介意。（還有我的這個功能用的是百度的介面）我用了兩種方式來實現這個功能，一種是原生的js方式，一種是jQuery的方式。可以對比。1、用原生方式實現。<!DOCTYPE html> &l

原生AJAX+jsp+servlet實現百度搜索框提示效果

我們這裡使用HTML5的新特性datalist實現輸入框的自動下拉提示，用datalist通過id與input關聯起來，在搜尋時就會出現下拉框。下面是HTML程式碼。 　　<!-- 輸入框 --> <input type="text" size="50" id="sear

仿百度搜索 知識點AJAX

搜尋頁面   search.jsp    記得引入jquery <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@ taglib uri="http://jav

09.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax異步請求數據

class ivr url 實現類 int php head 實現 sta cmd下安裝axios npm install axios 安裝好後,會多出node_modules文件夾 思路: 監聽data裏的word改變時,發送ajax異步請求數據, 把返回的數據賦值給d

09.1.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax非同步請求資料,返回陣列

09.1html裡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

C# 百度搜索結果xpath分析

als 接收數據 har rim resp inner ets webclient containe using System; using System.Collections.Generic; using System.IO; using System.Linq; u

Python實驗:百度搜索關鍵字自動打開相關URL

python實驗:百度搜索關鍵字自動打開相關url#! python # coding: utf-8 # python實現百度搜索關鍵字，並依次用瀏覽器打開前五個搜索結果 ## ##Beautiful Soup 是一個模塊，用於從HTML 頁面中提取信息（用於這個目的時，它比正則表達式好很多）。Beautif

python實現百度搜索

python 爬蟲 mechanize 瀏覽器 利用Python mechanize模塊模擬瀏覽器實現百度搜索# -*- coding:utf-8 -*- import mechanize import sys reload(sys) sys.setdefaultencoding(‘utf8‘

百度搜索建議API

建議 amp nbsp api cti 函數 等價 回調函數 自定義函數 1.直接返回json數據 http://suggestion.baidu.com/?wd=關鍵詞&action=opensearch 2.json數據當做回調函數的參數傳回來http://

python爬取百度搜索圖片

知乎 需要 with 異常 mage 不足 request height adr 在之前通過爬取貼吧圖片有了一點經驗，先根據之前經驗再次爬取百度搜索界面圖片 廢話不說，先上代碼 #!/usr/bin/env python # -*- coding: utf-8 -*- #

python爬取百度搜索結果ur匯總

百度搜索 sta attr amp end rom range 百度 篩選 寫了兩篇之後，我覺得關於爬蟲，重點還是分析過程 分析些什麽呢： 1）首先明確自己要爬取的目標 　　比如這次我們需要爬取的是使用百度搜索之後所有出來的url結果 2）分析手動進行的獲取目標的過程，以便

我的第一個自動化腳本（python）----百度搜索

expect style 目錄 .exe nbsp com 自動 其他人 其他 這是一個純小白胡說八道的個人總結，如果有人看到什麽不對的，歡迎批評指正 博客園開通了很久，一直不知道該怎麽去寫，總覺得自己要寫的東西都是別人已經寫過的，我再去寫就是在重復之前人所說，今天去面試和

高仿百度搜索引擎

ucc return 回調函數 else 上下 about inpu click eat 這是百度搜索 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=

python實現簡單的百度搜索

python 百度 爬蟲#!/usr/bin/python # coding=utf-8 import urllib import urllib2 #實現百度關鍵字查詢的小例子 #定義基礎url url = "http://www.baidu.com/s?" #定義請求頭信息 headers = {"U

js仿百度搜索框

eat ucc txt tex text str jquer nbsp erro 1.js仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

百度搜索將推出“驚雷算法”打擊網站刷點擊作弊行為

百度搜索 驚雷算法百度站長平臺11月剛改版為百度搜索資源平臺，各位站長應該還記得“閃電算法”吧？上個月的閃電讓各位站長吃的消嗎？而今天，就在今天淩晨百度搜索資源平臺發布新的算法預告“驚雷算法”！ 公告原文如下：百度搜索推出驚雷算法 嚴厲打擊刷點擊作弊行為發布日期：2017-11-20 00:00:00百度搜索

Ruby用百度搜索爬蟲

https each span 分享圖片 百度 .get get請求 puts 分享 Ruby用百度搜索爬蟲 博主ruby學得斷斷續續，打算寫一個有點用的小程序娛樂一下，打算用ruby通過百度通道爬取網絡信息。 第三方庫準備 mechanize：比較方便地處理網絡請求，類