AJAX實(shí)現(xiàn)局部刷新功能

更新時(shí)間：2017年06月05日 09:43:45 作者：kjshuan

這篇文章主要為大家詳細(xì)介紹了如何使用AJAX實(shí)現(xiàn)局部刷新功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

簡(jiǎn)介

AJAX 是與瀏覽器與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁(yè)面的情況下，實(shí)現(xiàn)了前后臺(tái)數(shù)據(jù)交互，可以選擇操作dom對(duì)頁(yè)面進(jìn)行更新

jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。

通過(guò) jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本（text）、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁(yè)的被選元素中。

提示：如果沒有 jQuery，AJAX 編程還是有些難度的。

編寫常規(guī)的 AJAX 代碼并不容易，因?yàn)椴煌臑g覽器對(duì) AJAX 的實(shí)現(xiàn)并不相同。這意味著您必須編寫額外的代碼對(duì)瀏覽器進(jìn)行測(cè)試。不過(guò)，jQuery 團(tuán)隊(duì)為我們解決了這個(gè)難題，我們只需要一行簡(jiǎn)單的代碼，就可以實(shí)現(xiàn) AJAX 功能

常用屬性參數(shù)

$.ajax( {
     "url"            :  "url",                      // 要提交的URL路徑
     "type"         :  "get",                     // 發(fā)送請(qǐng)求的方式
     "data"         :  data,                      // 要發(fā)送到服務(wù)器的數(shù)據(jù)
     "dataType" :  "text",                   // 指定傳輸?shù)臄?shù)據(jù)格式
     "beforeSend": function() {     請(qǐng)求之前的方法
         }
     "success"  :  function(result) {  // 請(qǐng)求成功后要執(zhí)行的代碼
         },
      "error"       :  function() {           // 請(qǐng)求失敗后要執(zhí)行的代碼
         }
} );
var data ={}

后臺(tái)響應(yīng)

使用ajax進(jìn)行增刪改查時(shí)get、post方法都能實(shí)現(xiàn)其功能。但是出于數(shù)據(jù)安全性的考慮，數(shù)據(jù)的添加和修改最好不要使用get方法。當(dāng)數(shù)據(jù)量極大的時(shí)候，數(shù)據(jù)的獲取也不建議采用get方法。get方法數(shù)據(jù)傳輸速度快但不能傳大數(shù)據(jù)，傳輸不安全，post方法適用于傳輸大數(shù)據(jù)，傳輸速度比get較慢但安全性高。如：當(dāng)獲取某個(gè)實(shí)體類集合的時(shí)候

舉例

@WebServlet("/back/facebook/facebookmanage")
public class FacebookManageServlet extends HttpServlet {
    IFacebookService facebookService = new FacebookServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        String fid = req.getParameter("id");
        int id = 0;
        if (!"".equals(fid))
            id = Integer.parseInt(fid);
        int result = facebookService.deleteFacebook(id);
        resp.getWriter().print(result);
    }

注意

resp.setContentType中的值根據(jù)前臺(tái)所要接收的對(duì)應(yīng)的數(shù)據(jù)類型來(lái)填寫，dataType是json類型則填寫"application/json"，其他則為"text/html;charset=utf-8"。這是因?yàn)榍昂笈_(tái)的編碼類型不一樣所導(dǎo)致。

其實(shí)沒有多大意義。success里的result接受到值之后，你可以把它轉(zhuǎn)成json數(shù)據(jù)然后通過(guò)點(diǎn)的方式去獲取數(shù)據(jù)

方法是：

JSON.parse(jsonstr); //可以將json字符串轉(zhuǎn)換成json對(duì)象

JSON.stringify(jsonobj);//可以將json對(duì)象轉(zhuǎn)換成json對(duì)符串

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以將json字符串轉(zhuǎn)換成json對(duì)象

resp.getWriter().print()可以傳對(duì)象

resp.getWriter().writer()只能傳字符串

需要靈活運(yùn)用

JSON

簡(jiǎn)介

JSON（JavaScript Object Notation）一種輕量級(jí)的數(shù)據(jù)交換格式采用獨(dú)立于語(yǔ)言的文本格式通常用于在客戶端和服務(wù)器之間傳遞數(shù)據(jù)

優(yōu)點(diǎn)

JSON的優(yōu)點(diǎn) 輕量級(jí)交互語(yǔ)言結(jié)構(gòu)簡(jiǎn)單易于解析

定義JSON對(duì)象

var person = { "name" : "張三",   "age" : 30,  "spouse" : null };

定義JSON數(shù)組

var countryArray = [ "中國(guó)",  "美國(guó)",  "俄羅斯" ];
var personArray = [ { "name":"張三",  "age":30 },
                                  { "name":"李四",  "age":40 } ];

第一步 ajax jsp 頁(yè)面

<%@ 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>
<style type="text/css">
html, body {
	height: 100%;
	overflow: auto;
}
 
body {
	background: url(ad.jpg) top left;
	background-size: 100%;
}
 
span {
	color: blue;
	font-size: 30px;
}
 
#a {
	font-size: 20px;
}
</style>
</head>
<body>
	<div style="width: 100%; text-align: center">
		<h1 style="color: red">新增圖書信息</h1>
		<form action="${pageContext.request.contextPath}/jsp/AddbookServlet" method="get">
			<div>
				<span>圖書名稱：</span><input type="text" name="name" />
			</div>
			<br>
			<div>
				<span>圖書作者：</span><input type="text" name="author" />
			</div>
			<br>
			<div>
				<span>購(gòu)買日期：</span><input type="text" name="data" />
			</div>
			<br>
			<div>
				<span>&nbsp;圖書類別：</span>
				<select id="typebook" name="typebook1"  style="color: red">
					<option value="0" >選擇所屬分類</option>
					<option value="1" >1</option>
					<option value="2" >2</option>
					<option value="3" >3</option>
				</select>
			</divcone>
			<br>
			<div>
				<span>&nbsp;</span><input type="submit" value="增加圖書" name="subbook" id="subbooks"
					style="font-size: 30px "  />
			</div>
		</form>
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$("input[name=name]").blur(function (){
				/*  if($("input[name=name]").val()==""){
					return;
				} */ 
				var data ={"name":$("input[name=name]").val()}
				$.ajax( {
				    "url"            :  "NamebookServlet",                      // 要提交的URL路徑
				    "type"         :  "get",                     // 發(fā)送請(qǐng)求的方式
				    "data"         :  data,                      // 要發(fā)送到服務(wù)器的數(shù)據(jù)
				    "dataType" :  "text",                   // 指定傳輸?shù)臄?shù)據(jù)格式
				    "success"  :  function(result) {  // 請(qǐng)求成功后要執(zhí)行的代碼
					    if(result=='true'){
					    	alert("圖書名稱和作者名稱不能為空")
					    	$("input[name=name]").val("格式為（xxx）");
					    	$("input[name=name]").focus();
					    	console.log("圖書名稱和作者名稱不能為空11111");
					    	return;				    	
					    }
				    },
				     "error"       :  function() { 
				    	 // 請(qǐng)求失敗后要執(zhí)行的代碼
					     }
				} );
				
				
			})	
				$("input[name=author]").blur(function (){
				 
				var data ={"author":$("input[name=author]").val()}
				$.ajax( {
				    "url"            :  "AuthorbookServlet",                      // 要提交的URL路徑
				    "type"         :  "get",                     // 發(fā)送請(qǐng)求的方式
				    "data"         :  data,                      // 要發(fā)送到服務(wù)器的數(shù)據(jù)
				    "dataType" :  "text",                   // 指定傳輸?shù)臄?shù)據(jù)格式
				    "success"  :  function(result) {  // 請(qǐng)求成功后要執(zhí)行的代碼
					    if(result=='true'){
					    	alert("圖書名稱和作者名稱不能為空")
					    	$("input[name=author]").val("格式為（xxx）");
					    	 $("input[name=author]").focus(); 
					    	console.log("圖書名稱和作者名稱不能為空11111");
					    	return;				    	
					    }
				    },
				     "error"       :  function() { 
				    	 // 請(qǐng)求失敗后要執(zhí)行的代碼
					     }
				} );
				
				
			}) 
			
				$("input[name=data]").blur(function (){
				 
				var data ={"data":$("input[name=data]").val()}
				if($("input[name=data]").val()==""){
					$("input[name=data]").val("格式為（yyyy-MM-dd）");
					alert("時(shí)期格式錯(cuò)誤")
					return;
				}
				$.ajax( {
				    "url"            :  "DatabookServlet",                      // 要提交的URL路徑
				    "type"         :  "get",                     // 發(fā)送請(qǐng)求的方式
				    "data"         :  data,                      // 要發(fā)送到服務(wù)器的數(shù)據(jù)
				    "dataType" :  "text",                   // 指定傳輸?shù)臄?shù)據(jù)格式
				    "success"  :  function(result) {  // 請(qǐng)求成功后要執(zhí)行的代碼
					    if(result=='true'){
					    	alert("時(shí)期格式錯(cuò)誤")
					    	$("input[name=data]").val("格式為（yyyy-MM-dd）");
					    	 $("input[name=data]").focus(); 
					    	console.log("時(shí)期格式錯(cuò)誤11111");
					    	return;				    	
					    }
				    },
				     "error"       :  function() { 
				    	 // 請(qǐng)求失敗后要執(zhí)行的代碼
					     }
				} );
				
				
			}) 
				$("#typebook").blur(function (){
				 
				var data ={"data":$("#typebook").val()}
				if($("#typebook").val()=="0"){
					alert("先選擇圖書分類")
				}		
			})
			
			$("$(input[name=subbook])").click(function (){
				 
				var data ={}
				$.ajax( {
				    "url"            :  "AddbookServlet",                      // 要提交的URL路徑
				    "type"         :  "get",                     // 發(fā)送請(qǐng)求的方式
				    "data"         :  data,                      // 要發(fā)送到服務(wù)器的數(shù)據(jù)
				    "dataType" :  "text",                   // 指定傳輸?shù)臄?shù)據(jù)格式
				    "success"  :  function(result) {  // 請(qǐng)求成功后要執(zhí)行的代碼
					    if(result=='true'){
					    	alert("添加圖書成功")					 
					    	return;				    	
					    }else{
					    	alert("添加圖書失敗")
					    }
				    
				    },
				     "error"       :  function() { 
				    	 // 請(qǐng)求失敗后要執(zhí)行的代碼
					     }
				} );
				
				
			}) 
		</script>
	</div>
</body>
</html>

第二步處理ajax請(qǐng)求響應(yīng)結(jié)果

package webDemo05.kgc.Servletbook;
 
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.services.Sercicesdao;
 
/**
 * Servlet implementation class AddbookServlet
 */
@WebServlet("/jsp/AddbookServlet")
public class AddbookServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddbookServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF8");
		response.setCharacterEncoding("UTF8");
		response.setContentType("text/html;charset=utf-8");
		
		Sercicesdao sd = new Sercicesdao();
		String name = request.getParameter("name");
		String author = request.getParameter("author");
		String date = request.getParameter("data");
		String typebook = request.getParameter("typebook1");
		
		try {
			/*SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");    //格式化規(guī)則
	        Date date = user.getTime();         //獲得你要處理的時(shí)間 Date型
	        String strDate= sdf.format(date ); //格式化成yyyy-MM-dd格式的時(shí)間字符串
	        Date newDate =sdf.parse(strDate); 
	        java.sql.Date resultDate = new java.sql.Date(newDate.getTime());//最后轉(zhuǎn)換成 java.sql.Date類型數(shù)據(jù)就可以了 注意：最開始時(shí)間數(shù)據(jù)類型是 java.util.Date類型  
*/
			
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");  
			 //格式化規(guī)則
			java.sql.Date date2 = new java.sql.Date(sdf.parse(date).getTime());
			System.out.println(date2);
			Book book = new Book(Integer.valueOf(1),name,author,date2,typebook);
			 boolean addb = sd.addb(book);
			 if(addb) {		
				 response.getWriter().print(true);				
				 response.sendRedirect("addbook.jsp");
				 return; 
			 }else {
				 request.getRequestDispatcher("addbook.jsp").forward(request, response);
				 return; 
			 }
 
		} catch (ParseException e) {
			e.printStackTrace();
			
		}
       
//稱：</span><input type="text" name="name" />         
//        
//        
//        
//者：</span><input type="text" name="author" />       
//        
//        
//        
//期：</span><input type="Date" name="data" />         
//        
//        
//        
//sp;圖書類別：</span>                                    
//ame="typebook" style="color: red">                 
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}

package webDemo05.kgc.Servletbook;
 
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.pojo.RandInfo;
import webDemo05.kgc.services.Sercicesdao;
 
/**
 * Servlet implementation class Addbook2Servlet
 */
@WebServlet("/jsp/Addbook2Servlet")
public class Addbook2Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Addbook2Servlet() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");  
		 //格式化規(guī)則
		
			for (int i = 0; i < 2; i++) {
				Sercicesdao sd = new Sercicesdao();
				RandInfo rr = new RandInfo();
				String date2=new Date().toString();
				Book book = new Book(Integer.valueOf(1),rr.getFemaleName()+"筆記",rr.getFemaleName(),new Date(),"計(jì)算機(jī)/軟件");
				sd.addb(book);
			}
	
						 
			 response.sendRedirect("LonginServlet");
			 return;
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}

package webDemo05.kgc.Servletbook;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class AuthorbookServlet
 */
@WebServlet("/jsp/AuthorbookServlet")
public class AuthorbookServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AuthorbookServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		  resp.setContentType("text/html;charset=utf-8");
	        req.setCharacterEncoding("UTF-8");
	        resp.setCharacterEncoding("UTF-8");
	     
	        String author = req.getParameter("author");
	       
	        if(author==null||"".equals(author.trim())) {
	        	resp.getWriter().print(true);       	
	        }
	        
	        
	        
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}

以上就是AJAX實(shí)現(xiàn)局部刷新功能的詳細(xì)內(nèi)容，更多關(guān)于AJAX局部刷新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: