ajax小案例：验证用户名、省市联动

科技2025-04-08 12

验证用户名是否可以使用

my.js function getXmlHttpRequest(){ var xmlHttp; if(window.XMLHttpRequest){ //适用于大部分浏览器 xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject){ //ie6及以前 xmlHttp = new ActiveXObject("Microsoft XMLHTTP"); } return xmlHttp; } html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/web06/js/my.js"></script> <script> //验证录入的用户名是否可以使用 function checkUsername(){ //1、得到文本框中的信息 var usernameValue = document.getElementById("username").value; //alert(usernameValue); //2、使用ajax向服务器发送请求，并携带username信息 //2.1 获取XMLHttpRequest对象 var xmlHttp = getXmlHttpRequest(); //2.2设置回调函数 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //2.5根据服务器的响应情况来处理响应数据 var responseMsg = xmlHttp.responseText; //3、处理服务器响应的数据，在span块中显示信息 document.getElementById("username_msg").innerHTML=responseMsg; } } }; //2.3open,设置请求路径与方式 xmlHttp.open("POST","/web06/userServlet"); //2.4发送请求 xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); xmlHttp.send("username="+usernameValue); } </script> </head> <body> <input type="text" id="username" onblur="checkUsername()"><span id="username_msg"></span> </body> </html> servlet服务器端处理 public class UserServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.得到请求参数 String username = request.getParameter("username"); //2.判断用户名是tom，代表被占用，否则没有被占用 String msg = " "; if("tom".equals(username)) { msg = "<font color='red'>用户名已经被占用</font>"; }else { msg = "<font color='green'>用户名可以使用</font>"; } //3.通过response获取输出流写回到浏览器 response.setCharacterEncoding("utf-8"); response.getWriter().write(msg); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

省市二级联动

案例需求代码实现

html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="/web06/js/my.js"></script> <script> //获取省份信息 function getProvince(){ //向服务器发送请求获取省份信息 //1.获取xmlhttprequest对象 var xmlHttp = getXmlHttpRequest(); //2设置回调函数 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //将服务器得到的信息处理填充到省份下拉框 var provinces = xmlHttp.responseText;//陕西省，湖北省，河南省 var province = provinces.split(","); //使用html dom完成将数据填充进下拉框的操作 for(var i=0;i<province.length;i++){ var option = document.createElement("option"); option.text=province[i]; //将option添加到下拉框中 document.getElementById("province").add(option); } } } } //3.open xmlHttp.open("POST","/web06/province"); //4.send xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); xmlHttp.send(null); } //获取城市信息 function getCity(){ //1.得到省份名称 var ops = document.getElementById("province").options;//得到下拉框下所有option数组 var option = ops[document.getElementById("province").selectedIndex];//得到选中项option对象 var pname = option.text;//得到option文本 //2.向服务器发送请求 //2.1.获取xmlhttprequest对象 var xmlHttp = getXmlHttpRequest(); //2.2.设置回调函数 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //清空城市下拉框信息 document.getElementById("city").innerHTML = "<option>---请选择城市---</option>"; //将服务器得到的信息处理填充到城市下拉框 var citys = xmlHttp.responseText; var city = citys.split(","); //使用html dom完成将数据填充进下拉框的操作 for(var i=0;i< city.length;i++){ var option = document.createElement("option"); option.text=city[i]; //将option添加到下拉框中 document.getElementById("city").add(option); } } } } //2.3.open xmlHttp.open("POST","/web06/city"); //2.4.send xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); xmlHttp.send("pname="+pname); } </script> </head> <body onload="getProvince()"> <select id="province" onchange="getCity()"> <option>---请选择省份---</option> </select> <select id="city"> <option>---请选择城市---</option> </select> </body> </html> 省份的工具类 public class CityUtil { private static final Map<String, String> map = new HashMap<String, String>(); static { map.put("陕西省", "西安市,渭南市,商洛市,宝鸡市"); map.put("湖北省", "武汉市,襄阳市"); map.put("河南省", "郑州市,洛阳市,驻马店市"); } //获取省份方法 public static String getProvince() { Set<String> set = map.keySet(); String provinces = " "; for (String p : set) { provinces += p +","; } return provinces.substring(0,provinces.length()-1); } //获取城市信息 public static String getCitys(String provinceName) { return map.get(provinceName); } public static void main(String[] args) { System.out.println(getProvince()); System.out.println(getCitys("陕西省")); } } ProvinceServlet public class ProvinceServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //得到省份信息 String province = CityUtil.getProvince(); //写回到浏览器 response.setCharacterEncoding("utf-8"); response.getWriter().write(province); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } CityServlet public class CityServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //解决post请求方式乱码 request.setCharacterEncoding("utf-8"); //1.得到省份名称 String pname = request.getParameter("pname"); //2.根据名称得到相应城市 String citys = CityUtil.getCitys(pname); //3.写回到浏览器 response.setCharacterEncoding("utf-8"); response.getWriter().write(citys); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

Processed: 0.014, SQL: 8