JavaWeb23(ajax+json实现自动补全)

最新推荐文章于 2024-10-06 20:29:51 发布

奶油蛋糕赛高!

最新推荐文章于 2024-10-06 20:29:51 发布

阅读量1.5k

点赞数

分类专栏： web 文章标签： java

本文链接：https://blog.csdn.net/emmhao/article/details/123777344

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用jQuery的Ajax技术在JavaWeb中实现用户名即时判断是否可用以及自动补全功能。通过$.ajax()和$.post()方法发送请求到服务器，结合Servlet和JSON处理数据，最终实现界面的交互效果。示例中包括了对事件监听、数据获取、服务器响应处理以及前端展示的详细步骤。

摘要由CSDN通过智能技术生成

一.使用jQuery的ajax即时判断用户名是否可用

以index界面为例

1.1、创建一个index.jsp界面并在body里面写一个文本框

   <body>
    <h2>使用jQuery的ajax即时判断用户名是否可用</h2>
    用户名：
   <input type="text" id="sname">
  </body>

此时界面是这个样子的

由于是jQuery的方式，所以再进行下一步的操作之前记得先引入jQuery类库 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>（如下图所示，记得建立一个js文件夹）接着另起一个script块

  <script type="text/javascript">
            $(function(){
                alert(111);
            })
        </script>

写上alert测试jQuery是否能用，

这样就表示能用，如果没有弹出就要去检查一下前面哪一步出了问题了

1.2、给文本框添加失焦事件并测试能否用(打开浏览界面时记得将鼠标移进文本框点击一下再移出，不然弹框不会出来，如果没出来依旧记得检查上面是否有哪一步除了错误)

<script type="text/javascript">
       $(function(){
                $("#sname").blur(function(){//sname是上面文本框取的id
                    alert(1);
                });
            })
   </script>

1.3、获取文本框的值并测试能否取到

<script type="text/javascript">
	$(function(){
		$("#sname").blur(function(){
			var name =$("#sname").val();
			alert(name);
		});
	})
</script>

这样就是有效果了

1.4、 将name值输送到服务器端做判断，判断 var name是否存在

两种方式：1.$.ajax() 2.$.post()

1.4.1、$.ajax()

<script type="text/javascript">
	$(function(){
		$("#sname").blur(function(){
			var name =$("#sname").val();
			//一、$.ajax()
			$.ajax({//逗号隔开
				url:"vname.do",//请求地址 一般是servlet
				data:{iname:name},//如果有其他参数的话可以这么写{iname:name,ipwd:pwd},另一种方式："iname="+name,"ipwd="+pwd 请求参数(传递到服务器)
				type:"post",//请求参数 一般为post
				dataType:"text",//预期服务器可能返回的数据类型 
				success:function(data){//成功的回调函数 data是服务器返回的数据
					alert(data);
				},
				error:function(){//失败的回调函数
					alert("有误");
				}
			}); 
			
			
		});
	})
</script>

成功就将服务器返回到数据类型弹出，失败则弹出有误

由于没有vname.do所以会弹出有误，所以要建立一个VNameServlet

设置编码方式、接收参数iname(即index表里date里的iname)、调用biz层再假设用户admin已经存在，str表示服务器给客户的响应即服务器返回的数据，就相当于index里面success:function(date)的date，然后获取out后将响应输送到用户，再去web.xml里配置

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class VNameServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html; charset=UTF-8");
		//获取out
		PrintWriter out = resp.getWriter();
		//接收参数
		String name = req.getParameter("iname");
		//调用biz层 select*from 用户表 where uname = ？ 返回boolean
		String str = "该用户名可用";
		//假设法：假设数据表已经存在admin这个用户
		if("admin".equals(name)) {
			str = "该用户名已存在";
		}
		//把响应输送到客户端
		out.print(str);
		out.flush();//刷新
		out.close();//关闭
	}
}

写完配置记得重启服务器

然后结果

想换成右侧提示框就在index界面在

用户名：<input type="text" id="sname">后加上一个<span id = "aa"></span>

alert(date)换成$("#aa").html(data);

($("#aa").html(data);相当于innerHTML 给span赋值（不用接收）括号里不放值相当于拿值)

想变颜色就在<span style="color:red" id = "aa"></span>

1.4.2、$.post()

 $(function(){
        $("#sname").blur(function(){
            var name =$("#sname").val();
         $.post("vname.do", {iname : name}, function(data) {
                $("#aa").html(data);
            })
        });
    })

其他的步骤都一样，就不做解释了。