Ajax页面局部刷新(三)

最新推荐文章于 2023-02-12 09:25:53 发布

一杯丶冰美式

最新推荐文章于 2023-02-12 09:25:53 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/RAVEEE/article/details/80650134

版权

今天我们通过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的用法。

一杯丶冰美式

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax页面局部刷新(三)

今天我们通过ajax技术来获取数据库里的用户信息，并实现局部刷新到网页上。那么首先就是封装一个ajax的库function rpajax(url,successrsp){var xhr=windows.XMLRequest ? new XMLHttoRequest(): new ActiveXObject('Microsoft.XMLHTTP');//首先还是从创建一个ajax对象开...
复制链接

扫一扫