AJAX實現(xiàn)局部刷新功能
更新時間：2017年06月05日 09:43:45 作者：kjshuan
這篇文章主要為大家詳細介紹了如何使用AJAX實現(xiàn)局部刷新功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
簡介
AJAX 是與瀏覽器與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁面的情況下，實現(xiàn)了前后臺數(shù)據(jù)交互，可以選擇操作dom對頁面進行更新
jQuery 提供多個與 AJAX 有關(guān)的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務(wù)器上請求文本（text）、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。
提示：如果沒有 jQuery，AJAX 編程還是有些難度的。
編寫常規(guī)的 AJAX 代碼并不容易，因為不同的瀏覽器對 AJAX 的實現(xiàn)并不相同。這意味著您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現(xiàn) AJAX 功能
常用屬性參數(shù)
$.ajax( {
"url" : "url", // 要提交的URL路徑
"type" : "get", // 發(fā)送請求的方式
"data" : data, // 要發(fā)送到服務(wù)器的數(shù)據(jù)
"dataType" : "text", // 指定傳輸?shù)臄?shù)據(jù)格式
"beforeSend": function() { 請求之前的方法
}
"success" : function(result) { // 請求成功后要執(zhí)行的代碼
},
"error" : function() { // 請求失敗后要執(zhí)行的代碼
}
} );
var data ={}后臺響應(yīng)
使用ajax進行增刪改查時get、post方法都能實現(xiàn)其功能。但是出于數(shù)據(jù)安全性的考慮，數(shù)據(jù)的添加和修改最好不要使用get方法。當數(shù)據(jù)量極大的時候，數(shù)據(jù)的獲取也不建議采用get方法。get方法數(shù)據(jù)傳輸速度快但不能傳大數(shù)據(jù)，傳輸不安全，post方法適用于傳輸大數(shù)據(jù)，傳輸速度比get較慢但安全性高。 如：當獲取某個實體類集合的時候
舉例
@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ù)前臺所要接收的對應(yīng)的數(shù)據(jù)類型來填寫，dataType是json類型則填寫"application/json"，其他則為"text/html;charset=utf-8"。這是因為前后臺的編碼類型不一樣所導(dǎo)致。
其實沒有多大意義。success里的result接受到值之后，你可以把它轉(zhuǎn)成json數(shù)據(jù)然后通過點的方式去獲取數(shù)據(jù)
方法是：
JSON.parse(jsonstr); //可以將json字符串轉(zhuǎn)換成json對象
JSON.stringify(jsonobj);//可以將json對象轉(zhuǎn)換成json對符串
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以將json字符串轉(zhuǎn)換成json對象
resp.getWriter().print()可以傳對象
resp.getWriter().writer()只能傳字符串
需要靈活運用
JSON
簡介
JSON（JavaScript Object Notation） 一種輕量級的數(shù)據(jù)交換格式 采用獨立于語言的文本格式 通常用于在客戶端和服務(wù)器之間傳遞數(shù)據(jù)
優(yōu)點
JSON的優(yōu)點 輕量級交互語言 結(jié)構(gòu)簡單 易于解析
定義JSON對象
var person = { "name" : "張三", "age" : 30, "spouse" : null };
定義JSON數(shù)組
var countryArray = [ "中國", "美國", "俄羅斯" ];
var personArray = [ { "name":"張三", "age":30 },
{ "name":"李四", "age":40 } ];
第一步 ajax jsp 頁面
<%@ 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>購買日期：</span><input type="text" name="data" />
</div>
<br>
<div>
<span> 圖書類別：</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> </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ā)送請求的方式
"data" : data, // 要發(fā)送到服務(wù)器的數(shù)據(jù)
"dataType" : "text", // 指定傳輸?shù)臄?shù)據(jù)格式
"success" : function(result) { // 請求成功后要執(zhí)行的代碼
if(result=='true'){
alert("圖書名稱和作者名稱不能為空")
$("input[name=name]").val("格式為（xxx）");
$("input[name=name]").focus();
console.log("圖書名稱和作者名稱不能為空11111");
return;
}
},
"error" : function() {
// 請求失敗后要執(zhí)行的代碼
}
} );
})
$("input[name=author]").blur(function (){
var data ={"author":$("input[name=author]").val()}
$.ajax( {
"url" : "AuthorbookServlet", // 要提交的URL路徑
"type" : "get", // 發(fā)送請求的方式
"data" : data, // 要發(fā)送到服務(wù)器的數(shù)據(jù)
"dataType" : "text", // 指定傳輸?shù)臄?shù)據(jù)格式
"success" : function(result) { // 請求成功后要執(zhí)行的代碼
if(result=='true'){
alert("圖書名稱和作者名稱不能為空")
$("input[name=author]").val("格式為（xxx）");
$("input[name=author]").focus();
console.log("圖書名稱和作者名稱不能為空11111");
return;
}
},
"error" : function() {
// 請求失敗后要執(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("時期格式錯誤")
return;
}
$.ajax( {
"url" : "DatabookServlet", // 要提交的URL路徑
"type" : "get", // 發(fā)送請求的方式
"data" : data, // 要發(fā)送到服務(wù)器的數(shù)據(jù)
"dataType" : "text", // 指定傳輸?shù)臄?shù)據(jù)格式
"success" : function(result) { // 請求成功后要執(zhí)行的代碼
if(result=='true'){
alert("時期格式錯誤")
$("input[name=data]").val("格式為（yyyy-MM-dd）");
$("input[name=data]").focus();
console.log("時期格式錯誤11111");
return;
}
},
"error" : function() {
// 請求失敗后要執(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ā)送請求的方式
"data" : data, // 要發(fā)送到服務(wù)器的數(shù)據(jù)
"dataType" : "text", // 指定傳輸?shù)臄?shù)據(jù)格式
"success" : function(result) { // 請求成功后要執(zhí)行的代碼
if(result=='true'){
alert("添加圖書成功")
return;
}else{
alert("添加圖書失敗")
}
},
"error" : function() {
// 請求失敗后要執(zhí)行的代碼
}
} );
})
</script>
</div>
</body>
</html>第二步 處理ajax請求 響應(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(); //獲得你要處理的時間 Date型
String strDate= sdf.format(date ); //格式化成yyyy-MM-dd格式的時間字符串
Date newDate =sdf.parse(strDate);
java.sql.Date resultDate = new java.sql.Date(newDate.getTime());//最后轉(zhuǎn)換成 java.sql.Date類型數(shù)據(jù)就可以了 注意：最開始時間數(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(),"計算機/軟件");
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實現(xiàn)局部刷新功能的詳細內(nèi)容，更多關(guān)于AJAX局部刷新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。接下來通過本文給大家介紹Ajax實現(xiàn)頁面自動刷新實例解析，感興趣的朋友一起看看吧2016-04-04
詳解Ajax跨域（jsonp） 調(diào)用JAVA后臺
本篇文章主要介紹了詳解Ajax跨域（jsonp） 調(diào)用JAVA后臺 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Django 是由 Python 開發(fā)的一個免費的開源網(wǎng)站框架，可以用于快速搭建高性能，優(yōu)雅的網(wǎng)站.AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）.接下來通過本文給大家介紹django中的ajax，希望對大家有所幫助2016-03-03
這篇文章主要介紹了使用ajax操作JavaScript 對象的相關(guān)資料,需要的朋友可以參考下2015-01-01
本篇文章主要介紹了Ajax實現(xiàn)表格實時編輯的方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
初次接觸onreadystatechange這個事件句柄不知道有何用處，看過一篇文章的介紹之后，終有大致所了解。2010-04-04
asp簡單的ajax留言板(采用三層模式)...2006-10-10
這篇文章主要為大家詳細介紹了使用Ajax時處理用戶session失效問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄猘jax傳送參數(shù)含有特殊字符的快速解決方法。希望對大家有所幫助，一起跟隨小編過來看看吧2016-04-04
ajax 操作全局監(jiān)測,用戶session失效的解決方法
下面小編就為大家?guī)硪黄猘jax 操作全局監(jiān)測,用戶session失效的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06