在做用户登陆和注册页面时,可以通过事件在js里面写ajax和后台异步传输,返回所需要的数据。
比如在写注册,当用户离开用户名的文本框时候,可以通过ajax引擎访问数据库查看这个命名是否合法,并且将信息返还给用户。
简单的deme如下:
js代码主要部分
var req;//创建对象 function check(x) { var errMsg=document.getElementById("errMsg"); if( x.value==null || x.value=="" ) { errMsg.innerHTML ="请输入用户名"; return false; } else{ var checkname=document.getElementById("checkname");//name var url = "checkname?id=" checkname.value; //创建一个XMLHttpRequest对象req if(window.XMLHttpRequest) { //IE7, Firefox, Opera支持 req = new XMLHttpRequest(); }else if(window.ActiveXObject) { //IE5,IE6支持 req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态 req.onreadystatechange = callback; //send函数发送请求 req.send(null); }} function callback() { if(req.readyState == 4 && req.status == 200) { var check = req.responseText; // alert(check); if(check=="yes") document.getElementById("errMsg").innerHTML = "用户名已存在"; else document.getElementById("errMsg").innerHTML = "用户名正确"; } }
jquery ajax模板
$.ajax({ url : 'add',//url type : "post", dataType : "json", data : { 'name':'bigsai', 'index':1 } success : function(data) { alert(data); }, error : function(XMLHttpRequest, textStatus, errorThrown) { layer.msg("textStatus = " textStatus ", XMLHttpRequest.status = " XMLHttpRequest.status ", XMLHttpRequest.readyState = " XMLHttpRequest.readyState); } }); });
sevlet代码部分:
mport java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class checkname extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); Connection con; response.setContentType("text/html"); response.setHeader("Cache-Control", "no-store"); response.setHeader("Pragma", "no-cache"); response.setDateHeader("Expires", 0); String name = request.getParameter("id"); name = new String(request.getParameter("id").getBytes("iso8859-1"),"utf-8"); //System.out.println(name); try { Class.forName("com.mysql.jdbc.Driver"); // System.out.println("数据库驱动加载成功"); con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/db?useSSL=false","root","123456"); // System.out.println("数据库连接成功"); String sql = "SELECT * FROM user where name=" "'" name "'"; Statement stmt = con.createStatement(); ResultSet rs1 = stmt.executeQuery(sql); if(rs1.next()) { out.write("yes"); } else { out.write("no"); } } catch (ClassNotFoundException | SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } out.close(); //out.write("hehe"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
web.xml配置
checkname</servlet-name> com.html.ajax.checkname</servlet-class> </servlet> checkname</servlet-name> /checkname</url-pattern> </servlet-mapping>
效果图