Ajax,设置默认焦点以及判断是否为空

<style type="text/css">
		.tishi{
			color: red;
		}
</style>

  

<script type="text/javascript">
	function getAjax(){
		var xhr;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}
		
		xhr.open("get", "getAjax03", true);
		xhr.onreadystatechange = function(){
			var jsonObj;
			if(xhr.readyState==4){
				jsonObj = JSON.parse(xhr.responseText);//可以将json字符串转换成json对象,用在前台js中。
				alert("json对象:"+jsonObj);
				alert("json字符串"+xhr.responseText);
				alert("json字符串,使用stringify(jsonObj)"+JSON.stringify(jsonObj));//可以将json对象转换成json对符串 ,用在action中(java代码中)。
				alert("姓名:"+jsonObj.name);
				alert("性别:"+jsonObj.sex);
			}
		}
		xhr.send(null);
	}
	function checkName(){
		var xhr;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}
		xhr.open("get", "getAjax03?userName="+document.getElementById(‘userName‘).value+"", true);
		var jsonObj;
		var jsonStr;
		var jiaoyan  = document.getElementById("userName").value; //用于获取到输入框的值
		var jiaodian = document.getElementById("userName");    //用于设置默认焦点,注意与上面一行的差别。
		alert("jiaoyan:"+jiaoyan);
		if(jiaoyan===""||jiaoyan===undefined){
			alert("用户名不能为空");//判断是否为空;
			jiaodian.focus();   //设置默认焦点,把默认焦点设置为注册用户名的input中。
		}
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				jsonStr = xhr.responseText;
				alert("jsonStr:"+jsonStr);
				jsonObj = JSON.parse(jsonStr);
				var userName = jsonObj.userName;
				document.getElementById("span").innerHTML=userName;
				//注意上面的innerHTML属性,而不是.value属性,切记,给页面上的span标签设置值。
			}
		}
		xhr.send(null);
	}
	
</script>

  

<body>
	失去焦点值:<input type="text" onclick="getAjax()" id="a" /></br>
	注册名:<input type="text" onblur="checkName()" id="userName" /><span class="tishi" id="span"></span></br>
	密码:<input type="text" onblur="checkPassWord()" id="password" /></br>
	
</body>

  下面是Java代码:

public class GetAjax03 extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		JSONObject jsonObj = new JSONObject();
		jsonObj.put("name", "weiyongle");
		jsonObj.put("sex", "nan");
		System.out.println("jsonObj:"+jsonObj);
		
		String userName = request.getParameter("userName");
		System.out.println("userName:"+userName);
		if(userName.equals("weiyongle")){
			jsonObj.put("userName", userName+"已经注册,请修改注册名");
		}else{
			
			jsonObj.put("userName", userName+"可以正常注册");
		}
		out.print(jsonObj);
		System.out.println("jsonObj:"+jsonObj);
		out.close();
	}
}

  下面是web.xml

  <servlet>
  	<servlet-name>getAjax</servlet-name>
  	<servlet-class>com.wyl.web.GetAjax03</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>getAjax</servlet-name>
  	<url-pattern>/getAjax03</url-pattern>
  </servlet-mapping>

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。