JavaWeb-----------Ajax頁面局部刷新(三)
阿新 • • 發佈：2018-01-01
pre ces writer 成功 數據 content Language 服務器 bject
元旦節即將過去，現在繼續回來寫我的總結復習筆記，今天我們通過ajax技術來獲取數據庫裏的用戶信息，並
實現局部刷新到網頁上。那麽首先就是封裝一個ajax的庫
function rpajax(url,successrsp) { var xhr=windows.XMLRequest ? new XMLHttoRequest(): new ActiveXObject(‘Microsoft.XMLHTTP‘);//首先還是從創建一個ajax對象開始，考慮到瀏覽器的兼容性 使用了以上兩種方式 xhr.open("POST",url,true); xhr.onreadystatechange=function() { if(xhr.readyState==4)//服務器返回 { if(xhr,status==200)//狀態正常 { successFunc(xhr.successrsp); } else { alert("服務器錯誤"); } } }; xhr.send(); }
實現的功能傳入一個url，successrsp就是一個請求返回成功之後的一個function，有一個參數，參數就是服務器返回的報問體。
封裝一個ajax之後，接著就是後端的頁面了,後端數據庫得到ajax請求並將數據通過ajax的方式發送回前端的頁面。這裏我通過逗號，來分割不同的屬性值 如手機號，年齡，性別等
在這裏只通過用戶來獲得手機號
Servlet端，通過UserDAO裏面的方法將數據庫裏的具體的用戶查詢出來 存放到UserDTO中，再通過resp.writer來返回到前端，相關的DTO中定義了手機號，賬號和密碼。
DAO中實現了JDBC對數據庫的操作，在這裏就不一一闡述。
package com.xyf.web6;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetUserInfoServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req,HttpServletResponse resp) throws IOException
{
String username=req.getParameter("username");
UserDTO u=UserDAO.getByUserName(username);
if(u==null)
{
System.out.println("沒有這個用戶");
resp.getWriter().println("error");
}
else
{
String s=u.getAccount()+","+u.getPhone();
resp.getWriter().println("ok"+s);
}
}
}通過焦點觸發以及離開 來實現頁面的刷新功能，也就是當鼠標離開輸入框時自動刷新頁面，下面是前端部分的代碼，這裏需要註意的是
當 存在多個數據傳遞的時候 後端使用 ，來分割 前端也必須按照，這個規則來獲得數據，這樣才能真正意義上的獲得所有數據
var values=data.split(",");
var phoneNum =values[1];
document.getElementById("phoneNum").innerHTML=phoneNum;
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script type="text/javascript" src="ajax.js"></script> <script> window.onload=function(){ var txtUserName= document.getElementById("txtUserName"); //onblur：焦點離開觸發onblur事件 txtUserName.onblur = function(){ //var username = txtUserName.value; var username = this.value; rpajax("getUserInfo?username="+username,function(data){ if(data=="error") { alert("沒有這個用戶"); } alert(data); var values=data.split(","); var phoneNum =values[1]; document.getElementById("phoneNum").innerHTML=phoneNum; // document.getElementById("User").innerHTML=User; }); } } </script> <body> 手機號:<span id="phoneNum"></span> 用戶名:<input type="text" id="txtUserName"> <span id="msg"></span> </body> </html>
數據庫裏的admin 對應的手機號為150081218
這樣我們通過ajax技術局部刷新頁面來獲得到了手機號
但是當存在多個用戶多個屬性傳遞過來時又應該怎麽辦？單獨定義一個|來分割還是怎麽做？
這個時候就出現了json，之後會更新json的用法。
JavaWeb-----------Ajax頁面局部刷新(三)