JavaWeb-----------Ajax页面局部刷新(三)

元旦节即将过去,现在继续回来写我的总结复习笔记,今天我们通过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

JavaWeb-----------Ajax页面局部刷新(三)的相关文章

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h

使用ajax与iframe嵌套实现页面局部刷新

使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.?1. [代码]javascript代码 function cj_start(depname,groupid){    var urls = "<%=path%>/userGather.action";    var status = "";    var html_1 = "<iframe frameborder=\"0\&q

jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代码如下: Java代码   <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("email&quo

Ajax实时局部刷新

//Ajax实现局部刷新      <script type="text/javascript">    var xmlhttp;    function getData()    {      //获取用户填写的名称      var city=document.getElementById("txt").value;      //创建异步调用对象      xmlhttp=new ActiveXObject("Microsoft.XMLH

Ajax 异步局部刷新

Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify() 1.序列化(将JavaScrip 转换为 json)使用 JSON.st

关于页面局部刷新例程

RS技术的一个具体例子 在前面的帖子中,我介绍了RS的基本工作原理,显然如果将RS技术运用在一个 网站的设计中将会有很多非凡的作用(尤其是它的那个最大的优点,可以在不刷新 页面的情况下调用服务端的代码).正是因为这个特点,你就可以象在编写一个 传统的C/S模式的程序一样,对数据库的数据进行处理了(我想大家一定很想知道具体应该如何来实现了,下面将给出一个具体的例子,调试这个破程序几乎快把我给累死,呵呵.) 从前面的描述可以看到,要使用RS技术就需要客户端和服务端满足下面两个条件: 1.客户端只需要

Webform——页面局部刷新

有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控件为:AJAX扩展里面的ScriptManager和UpdatePanel.    ScriptManager就是封装好的JS代码,可以直接拿来用.    UpdatePanel,要局部刷新的部分放在这里面去. 在这张图片里,省市区三个下拉列表就被放在了UpdatePanel里面,从而实现了局部刷新

HTML页面局部刷新

/.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服务器处理后返回结果,再由Ajax接收数据: 3.通过DOM方法或jQuery方法将数据载入页面,事件响应刷新完成. $('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: "POST", url:

AjaxAnyWhere 实现页面局部刷新

这个比较jquery.单纯ajax异步简单多了,不多说了直接上代码. 需要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa.js  ,免费下载地址http://download.csdn.net/detail/xuke6677/8064977 目录结构如下: 1.ListBean.java 实体类    <strong><span style="font-family:System;font-size