JQuery介紹，包括load(),get(),post()以及賦值等方法

時間  2019-12-06
標籤 jquery 介紹 包括 load post 以及 賦值 方法 欄目 JQuery 简体版
原文   原文鏈接

1.JQuery是什麼

JQuery 是 javascript 的一個框架集合 ， 並非什麼新的技術。javascript

2.Jquery有什麼用

- 寫少代碼,作多事情【write less do more】
- 免費，開源且輕量級的js庫，容量很小
 注意：項目中，提倡引用min版的js庫
- 兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome
        注意：jQuery不是將全部JS所有封裝，只是有選擇的封裝
- 可以處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
- 文檔手冊很全，很詳細
- 成熟的插件可供選擇
- 提倡對主要的html標籤提供一個id屬性，但不是必須的
- 出錯後，有必定的提示信息
- 不用再在html裏面經過<script>標籤插入一大堆js來調用命令了
複製代碼

3.Ajax與JQuery

JQuery01

一、JS是一門前端語言。 二、Ajax是一門技術，它提供了異步更新的機制，使用客戶端與服務器間交換數據而非整個頁面文檔，實現頁面的局部更新。 三、jQuery是一個框架，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便html

4.使用：

1.引用JQuery.js文件前端

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
複製代碼

2.經常使用方法 .load()java

$("#div01").load("userservlet"); 解釋：找到頁面id爲div01的標籤，再加載路徑爲userservlet的文件，這裏指servlet路徑。jquery

$("#div01") 至關於JavaScript中的document.getElementById("div01")ajax

$.get(url，function(data){});數據庫

一get請求的方式向服務器傳輸數據，能夠不加function()無需參數返回。 若需添加請求的參數，直接添加在URL上，例如"usernameServlet?name="eric"; 若須要返回值，則添加一個數據回調函數json

$.post(url,data,callback);瀏覽器

已post方式向服務器提交數據，並返回 url:所處理的控制類的路徑 data：像服務器傳遞的數據，其格式爲：{name:"zhangsan",age="18"} callback:獲取服務器返回的回調函數，格式爲function(data,status){},status表示狀態，200表示成功。bash

eg:

$.post("<%=basePath%>customer/update.action",$("#edit_customer_form").serialize(),function(data){  
      if(data=="1"){
      alert("客戶信息更新成功！");
      }else{
        alert("客戶信息更新失敗！");
      }
      window.location.reload();
    });
函數二：
if(confirm('確實要刪除該客戶嗎?')) {
	$.post("<%=basePath%>customer/delete.action",{"id":id},function(data){
	if(data=="1"){
	alert("客戶刪除刪除成功！");
	}else{
	alert("客戶信息刪除失敗！");
	}
	window.location.reload();
	});
		}
複製代碼

注意：上述有兩個點： $("form").serialize()

jQuery ajax()使用serialize()提交form數據,若是打印 $("form").serialize()的值， 格式是：id=12&name="eric"&age=18&city="aa"....... 那麼，問題來了，咱們在服務器的Controller中應當如何去接收呢？ 用@ResponseBody接收 confirm('')

在JavaScript中共有三種彈出框（alert，confirm，prompt）

  • 1.alert就是一個警告消息框。
  • 2.confirm（「你想讓用戶確認的信息」）確認消息框 首先：confirm 方法的返回值爲 true 或 false
  • 3.prompt() 提示消息框 用戶能夠在段輸入一個答案來響應您的提示，返回一個用戶的輸入值

.val(),.html(),.text()

JQuery獲取標籤的值和賦值的方法 下面說一下三者之間的區別：

  • $("#div01").val()
    • val(),表示獲取id爲div01標籤中的value值；
    • val("aaa")針對帶有value屬性的元素進行賦值， 其實就是給該元素的 value賦值aaa
  • $("#div01").html()
    • .html()獲取獲取id爲div01標籤體中的值
    • .html(""《option value=''>"") 針對某一個元素，可使用元素左右包括起來一段值的元素賦值 。如：.html("《font》 《/font》")
  • $("#dov01").text()
    • .text()做用同html，只是一個支持html代碼
    • .text(「aaaaaa」)該方法針對那些能夠在兩個標籤中寫值的賦值工做 。 如 ：《div》aaaaaaaa《/div》

$.ajax()

提層實現基於Ajax的使用，關鍵在於內部的參數如何寫，這裏直接上代碼

function editCustomer(id) {
$.ajax({
	type:"get",
	url:"<%=basePath%>customer/edit.action",
	data:{"id":id},
	success:function(data) {
	$("#edit_cust_id").val(data.cust_id);
	$("#edit_customerName").val(data.cust_name);
	$("#edit_customerFrom").val(data.cust_source)
	$("#edit_custIndustry").val(data.cust_industry)
	$("#edit_custLevel").val(data.cust_level)
	$("#edit_linkMan").val(data.cust_linkman);
	$("#edit_phone").val(data.cust_phone);
	$("#edit_mobile").val(data.cust_mobile);
	$("#edit_zipcode").val(data.cust_zipcode);
	$("#edit_address").val(data.cust_address);
      }
   });
}
複製代碼

以上有一個點，那就是返回的數據data，data是有Controller層使用@ResponseBody直接將一個對象以Json的形式返回的。

案例1.仿百度提示

需求：在咱們使用百度的時候，每每在輸入幾個字符後，它就會給咱們一個提示了，那麼前端頁面是如何實現響應的呢？

思路：：使用.keyup獲取鍵盤彈起的事件，而後獲取輸入框的值，即每當鍵盤彈起後，就獲取此時輸入框的值，獲得輸入框的值後將數據發送（Post）到Controller層，Controller調用service層->持久層->獲取數據庫的信息，再將其返回前端頁面。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"src="../js/baidu.js"></script>
<title>Insert title here</title>
</head>
<body background="../105.jpg">
<center>
	<h2>百度一下</h2>
	<input type="text" id="word" style="width:500px;height:50px"/>
	<input type="button" value="搜搜" style="width:80px;height:56px"/>
	<div id="div01" style="position:relative;left:-43px; width:500px;height:300px;border: 1px solid blue;display: none"></div>
</center>
</body>
</html>
複製代碼

js:

//入口函數  之前是 $(document).ready(fuction(){})
//獲取鍵盤彈起的事件
$(function(){
	$("#word").keyup(function() {
		//獲取輸入框的信息，再上傳
	//	alert("asd");
		var word=$(this).val();
		//alert(word);
		$.post("/AjaxAndJQuery/findServlet",{words:word},function(data,status){
			//alert(data);
			//返回的data是一個jsp頁面，如今咱們把它放在指定的div中
			if(word==""){
				$("#div01").hide();
			}else{
			$("#div01").show();
			$("#div01").html(data);
			}
		});
	})
});
複製代碼

Controller(這裏使用servlet)：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
	//獲取數據，查詢數據庫，返回數據值
	request.setCharacterEncoding("utf-8");
	String word = request.getParameter("words");
	//
	findDao findDaoImpl = new findDaoImpl();
	List<String> list = findDaoImpl.findInformation(word);
	//打印從數據庫獲取的內容
	for (String news : list) {
	System.out.println(news);
	}
	request.setAttribute("words", list);
	response.setContentType("text/html;charset=utf-8");
	/**
	 * 誰請求，它就把頁面返回給誰，通常咱們都是用瀏覽器去訪問，它就把頁面返回給瀏覽器
	 * 當我用JQuery去訪問，它就把數據返回給JQuery，放在data數據裏面
	 */
	request.getRequestDispatcher("/JQueryFind/list.jsp").forward(request, response);
	} catch (SQLException e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
	}
	}
複製代碼

注意：此處返回的是一個jsp頁面，也就是說，在JQuery中的data是一個jsp頁面 list.jsp

<body>
	<table style="width:500px">
		<c:forEach items="${words}" var="word">
			<tr>
				<td>${word}</td>
			</tr>
		</c:forEach>
	</table>
</body>
複製代碼

案例2.省市聯動

需求：當咱們在註冊時，可能會出現選城市的狀況，好比當你province選擇湖北後，對應的city就自動刷新爲湖北下面的城市，那麼其前端頁面的邏輯是如何實現的呢？

思路： 首先找到省份元素的標籤，而後根據.change事件，當其發生改變時，將其value值經過$.post()發送至Controller層，控制層返回結果（以XML或Json）的方式。

下面介紹第一種：Controller層經過XML與前端頁面

Controller(servlet實現)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.獲取參數
			int pic = Integer.parseInt(request.getParameter("pic"));
			//2.獲取城市列表
			cityDao cityImpl = new cityDaoImpl();

			List<city> findCity = cityImpl.findCity(pic);
			//3.將其返回
			//已XML的形式返回
			XStream xstream=new XStream();
			//設置類別名
			xstream.alias("city", city.class);
			//將類成員做爲屬性
			xstream.useAttributeFor(city.class, "pic");
			String xml = xstream.toXML(findCity);

			//設置返回格式
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
複製代碼

注意： XStream xstream=new XStream();將對象轉換爲XML的形式或者XML轉爲對象的格式。 具體使用找了一篇寫的比較詳細的博客：

www.cnblogs.com/mengfanrong…

JS:

$(function(){
	//1.找到省份元素，一旦發生改變，就去請求該省份的元素
	$("#province").change(function(){
		//得到province的value
		var pic=$(this).val();
		//post請求
		$.post("/AjaxAndJQuery/findCity",{pic:pic},function(data,status){
			//有一個數據回調  status表示返回的狀態值，200表示ok
			//返回的是一個XML文檔，須要的是其中的<name>標籤中的值
			/*
			 *  <city pic="2">
				 <name>惠州</name>
				</city>
 				<city pic="2">
				 <name>梅州</name>
				</city>
			 */
			//清空之前查詢過的值
			$("#city").html("<option value=''>-請選擇 -");
			$(data).find("city").each(function(){    
				//表示遍歷出來的每個元素都走這一個方法，遍歷一次city，就執行一次fuction方法
				//.find("city")獲得全部的city，而後遍歷
				//var pic=$(this).children("")
				var name=$(this).children("name").text();
				//alert(name);
				//在手冊添加欄能夠查到
				$("#city").append("<option value=''>"+name);
			});
		});
	});
})
複製代碼

jsp:

<body>
	省份:
	<select name="province" id="province">
		<option value="">-請選擇 -
		<option value="1">湖北
		<option value="2">廣東
		<option value="3">山東
		<option value="4">河南
	</select>
	城市:
	<select name="city" id="city">
		<option value="">-請選擇 -
	</select>
</body>
複製代碼

方式二：COntroller經過Json與前端頁面交互 說明：能夠直接採用如下方式（@ResponseBody）

@RequestMapping("edit")
	@ResponseBody
	/**
	 * jsp頁面中直接接收一個json串，因此直接將對象轉換成json數據格式
	 * @param id
	 * @return
	 */
	public Customer edit(Integer id){
		Customer customer = customerService.getCustomerById(id);
		return customer;
	}
複製代碼

可是因爲個人案例是使用servlet寫的，即需拼裝Json串（能夠手動拼裝或者經過工具類） 這裏採用的是 JSONArray jsonArray = JSONArray.fromObject(findCity);

servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			//1.獲取參數
			int pic = Integer.parseInt(request.getParameter("pic"));
			//2.獲取城市列表
			cityDao cityImpl = new cityDaoImpl();

			List<city> findCity = cityImpl.findCity(pic);
			//3.將其返回
			//已Json的形式返回
			JSONArray jsonArray = JSONArray.fromObject(findCity);
			String json = jsonArray.toString();

			System.out.println(json);
			//設置返回格式
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
複製代碼

js:

$(function(){
	//1.找到省份元素，一旦發生改變，就去請求該省份的元素
	$("#province").change(function(){
	//得到province的value
	var pic=$(this).val();
	//post請求
	$.post("/AjaxAndJQuery/findCityJson",{pic:pic},function(data,status){
	//有一個數據回調  status表示返回的狀態值，200表示ok
	/**
	 * 返回的data是json形式的字符串
	 * [{"name":"廣州","pic":2},{"name":"深圳","pic":2},{"name":"惠州","pic":2},{"name":"梅州","pic":2}]
	 */
	//清空之前查詢過的值
	$("#city").html("<option value=''>-請選擇 -");
	//遍歷data，獲取到【】中的{}內容，在經過 city.屬性 的方式訪問其值，其中city自定義，至關於給{}總體封裝成一個對象了
	$(data).each(function(index,city){
	$("#city").append("<option value=''>"+city.name);
  	});
    },"json");
    });
})
複製代碼

jsp:同上

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程