【Java Web基础】（十一）Ajax示例：根据用户输入的学号填充用户信息

本例完成的任务：用户输入完学号时触发Ajax异步请求，从服务器获取学号所对应学生信息，并对页面中相应的学生信息进行更新填充。

输入信息的JSP界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>example12_2.jsp</title><script type="text/javascript" src="example12_2.js" charset="UTF-8"></script>
</head>
<body><h1>获取学号对应的学生信息</h1><p>学号：<input type="text" name="sno" onblur="ajaxFunction(this.value)" /></p><p>姓名：<input type="text" name="sname" id="sname" readonly /></p><p>年龄：<input type="text" name="sage" id="sage" readonly /></p><p>院系：<input type="text" name="sdept" id="sdept" readonly /></p>
</body>
</html>

对应的JS文件：example12_2.js：

function createXHR(){var xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;
}
function ajaxFunction(sno) {xhr = createXHR();var url = "AjaxTestServlet?sno=" + sno;xhr.open("GET", url, true);xhr.onreadystatechange = function(){if (xhr.readyState == 4 && xhr.status == 200){var resData = xhr.responseText.split(",");document.getElementById("sname").value = resData[0];document.getElementById("sage").value = resData[1];document.getElementById("sdept").value = resData[2];}};xhr.send();
}

Servlet文件为AjaxTestServlet.java：

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 java.io.IOException;
import java.util.HashMap;
import java.util.Map;@WebServlet("/example12_2/AjaxTestServlet")
public class AjaxTestServlet extends HttpServlet {private static final long serialVersionUID=1L;protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");Map<String,String> stus=new HashMap<String , String>();stus.put("20190101","陈恒 01,77,计算机学院");stus.put("20190102","陈恒 02,88,软件学院");stus.put("20190103","陈恒 03,99,信息学院");String sno = request.getParameter("sno");String stu = stus.get(sno);if(stu == null){stu = "error,error,error";}response.getWriter().print(stu);}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doGet(request,response);}
}

展示效果如下：

仅输入学号并失去焦点（因为给的条件是onblur()，失去焦点后悔触发）后：

【Java Web基础】（十一）Ajax示例：根据用户输入的学号填充用户信息相关推荐

Java Web基础
目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础标 ...
Java Web基础面试问题——Cookie和Session
Java Web基础面试问题 Cookie 和 Session 的区别什么是HTTP 超文本传输协议,是一种用于分布式.协作式和超媒体信息系统的应用层协议. 设计HTTP最初的目的是为了提供一种发布 ...
winform定义数据源名称_winform ComboBox自定义数据源实现用户输入时出现与用户输入匹配的项...
ComboBox自定义数据源实现用户输入时出现与用户输入匹配的项using System; using System.Collections.Generic; using System.Compone ...
python创建学生类姓名学号_Python练习题：由用户输入学生学号与姓名，数据用字典存储，最终输出学生信息（按学号由小到大显示）。...
# 1.由用户输入学生学号与姓名,数据用字典存储,最终输出学生信息(按学号由小到大显示) # 创建字典 students = {} # 用户输入 student = input("请输入学号 ...
python输入学生姓名_Python练习题：由用户输入学生学号与姓名，数据用字典存储，最终输出学生信息（按学号由小到大显示）。...
思路: 用户输入信息,储存在字典里判断是否继续输入,继续填yes,输入其他则不继续继续输入时判断学号是否重复(名字不判断,名字存在多人重名情况),存在则不储存,重新输入,并储存在字典里对字典排序 ...
【Java Web基础】(五)实现新增下拉列表—由用户输入内容(Html+JS)
Html文件中的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
Java web基础学习笔记
1.xml概述 1.1xml:xml一种数据存储格式,这种数据存储格式在存储数据内容的同时,还能够保存数据之间的关系 1.2xml保存数据的方法:xml利用标签来保存数据的内容,利用标签之间的嵌套关系 ...
针对java web基础系统梳理随笔录
POJO:Plain Ordinary Java Object 不含业务逻辑的java简单对象: 可以称为支持业务逻辑的协助类: 有时被称为Data对象,大量用于表现现实中的对象: 实际就是普通的Ja ...
【Java Web编程十一】深入理解Servlet监听器
上篇Blog详细介绍了Servlet的过滤器,了解到过滤器类似一个AOP的概念,这篇Blog就来学习下Servlet的监听器,了解下Java Web的第三大组件的用处是什么,又是怎么工作的. 监听器基 ...

【Java Web基础】（十一）Ajax示例：根据用户输入的学号填充用户信息

【Java Web基础】（十一）Ajax示例：根据用户输入的学号填充用户信息相关推荐

最新文章

热门文章