首页 > 代码库 > ajax的get与post提交方式
ajax的get与post提交方式
Get方式的用户名验证
1、编写html代码
<form> 用户名[GET]:<input id="usernameID" type="text" name="username" maxlength="4"/> 光标移出后,立即检查结果 </form> <hr/> <span id="resID"></span>
2、编写ajax.js文件
//创建AJAX异步对象,即XMLHttpRequestfunction createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器不支持ajax,请更换浏览器"); } } return ajax;}
3、HTML代码中引入js文件
<script type="text/javascript" src="http://www.mamicode.com/js/ajax.js"></script>
4、get方式判断
<script type="text/javascript"> //定位文本框,同时提供焦点失去事件 document.getElementById("usernameID").onblur = function(){ //获取文本框中输入的值 var username = this.value; //如果用户没有填内容 if(username.length == 0){ //提示 document.getElementById("resID").innerHTML = "用户名必填"; }else{ //对汉字进行UTF-8(U8)的编码 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null); //--------------------------------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; } } } } } </script>
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String username = request.getParameter("username"); byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8"); System.out.println("username=" + username); String tip = "<font color=‘green‘>可以注册</font>"; if("杰克".equals(username)){ tip = "<font color=‘red‘>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
5、post方式判断
<script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//杰克 //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content); //===========================================等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) //创建img标签 var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src =http://www.mamicode.com/ tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); } } } } </script>
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); System.out.println("username=" + username); String tip = "images/MsgSent.gif"; if("杰克".equals(username)){ tip = "images/MsgError.gif"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
ajax的get与post提交方式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。