javasript(jq)的AJAX传数据给servlet,并进行数据的返回

 前端的输入框

<input name="sno" type="number" placeholder="学号" style="width: 140px" onblur="tijiao()" />
					 <span id="no">dsad</span>

JS   这里我并没有考虑IE5 6的情况

	function tijiao() {
		var sno = document.getElementsByName("sno")[0];
		var req = new XMLHttpRequest();
		req.onreadystatechange = function() {
			//alert(req.readyState);
			if (req.readyState == 4) { //请求一切正常
				if (req.status == 200) { //服务器响应正常
					var head = req.responseText;   //servlet 传过来的数据接收下
					document.getElementById("no").innerHTML = head;
				}
			}
		}

		req.open("get", "${pageContext.request.contextPath}/snoajax?sno="+ sno.value, true);//建立连接
		
		req.send();
	}

jq实现

这里要把 intput 的函数去掉 同时给他一个id 为sno ,  这里实现的效果和js是一样的

$(document).ready(function(){
	
	    $("#sno").blur(function(){
	    	var sno= $("#sno").val();
	    	 $.ajax({
	                type: "POST",                            //传数据的方式
	                url: "${pageContext.request.contextPath}/snoajax", //servlet地址 
	                data: {"sno":sno},            //传的数据  
	                success: function(result){               //传数据成功之后的操作   result是servlet传过来的数据  这个函数对result进行处理，让它显示在 输入框中
	                	$("#no").text(result);          //找到输入框 并且将result的值 传进去
	                }
	            });
	    });

});

XML 里面的配置

<servlet>
    <servlet-name>snoAjaxServlet</servlet-name>
    <servlet-class>com.servlet.snoAjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>snoAjaxServlet</servlet-name>
    <url-pattern>/snoajax</url-pattern>
  </servlet-mapping>

对应的servlet

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		 response.setContentType("text");
		String sno=request.getParameter("sno");	
		PrintWriter out = response.getWriter();
		UserDaoImpl us=new UserDaoImpl();
		System.out.println("进来了");
	  try {
		if(!us.findsno(sno)) {
			String result="学号已经存在";
			out.println(result);
			out.flush();
			out.close(); 
		  }else {
			 String result="学号可以使用";
			  out.println(result);
			out.flush();
			out.close(); 	
		  }
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	
	}