Java 和Ajax的简单结合

在做用户登陆和注册页面时，可以通过事件在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 = "用户名正确"; } 
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
 

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);
 }
 });
});

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

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);
	}
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
 

web.xml配置

 checkname</servlet-name>
 com.html.ajax.checkname</servlet-class>
 </servlet> checkname</servlet-name>
 /checkname</url-pattern>
 </servlet-mapping>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

效果图

如果对后端、爬虫等感性趣欢迎关注我的个人公众号交流：bigsai

文章来源: bigsai.blog.csdn.net，作者：Big sai，版权归原作者所有，如需转载，请联系作者。

原文链接：bigsai.blog.csdn.net/article/details/80776573