元旦节即将过去,现在继续回来写我的总结复习笔记,今天我们通过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的用法。
原文地址:https://www.cnblogs.com/a986771570/p/8167952.html
时间: 2024-10-09 12:35:59