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