加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax发送Post请求

发布时间:2020-12-16 02:10:49 所属栏目:百科 来源:网络整理
导读:Ajax发送post请求与发送get请求大致类似,下面看具体实例,首先看JSP显示页面: form action="servlet/LoginServlet" method="post" table tr td用户账号:/td tdinput type="text" name="username" onblur="checkUser(this)"//td /tr tr td用户密码:/td td

Ajax发送post请求与发送get请求大致类似,下面看具体实例,首先看JSP显示页面:

<form action="servlet/LoginServlet" method="post">
    	<table>
    		<tr>
    			<td>用户账号:</td>
    			<td><input type="text" name="username" onblur="checkUser(this)"/></td>
    		</tr>
    		<tr>
    			<td>用户密码:</td>
    			<td><input type="password" name="password"/></td>
    		</tr>
    		<tr>
    			<td><input type="submit" value="注册"/></td>
    			<td><input type="reset" value="重置"></td>
    		</tr>
    	</table>
    </form>
然后看对发送信息进行处理的Servlet类,因为是POST方式发送信息,所以看一下doPost方法。
@Override
	protected void doPost(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		
		response.setContentType("text/html;charaet=UTF-8");
		PrintWriter out = response.getWriter();
		String name=request.getParameter("username");
		if(name.equals("admin"))
			out.print(false);
		else
			out.print(true);
		out.flush();
		out.close();
	}

然后看javascript如何实现Ajax请求
<script type="text/javascript">
		//创建XMLHttpRequest
		function createXmlHttpRequest(){
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		//当用户账号输入框失去焦点时调用该方法
		function checkUser(obj){
			//获取输入框输入的值
			var user = obj.value;
			//如果输入框中的值为空,那么弹窗提示,并且让该输入框获得焦点
			if(!user){
				alert("用户名不能为空!");
				obj.focus();
				return;
			}
			//不为空时,使用Ajax请求向后台发送信息,验证该用户名是否可用
			//post请求字符串
			var url="servlet/LoginServlet";
			//请求参数
			var userinfo = "username="+user;
			//调用方法创建XMLHttpRequest对象
			XmlHttpRequest = createXmlHttpRequest();
			//设置回调函数
			XmlHttpRequest.onreadystatechange=finish;
			//初始化xmlhttprequest
			XmlHttpRequest.open("POST",url,true);
			XmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//发送请求
			XmlHttpRequest.send(userinfo);
		}
		//回调函数
		function finish(){
			if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
				var result = XmlHttpRequest.responseText;
				alert(result);
				if(result =="true"){
					alert("用户名可用!");
				}else{
					alert("用户名不可用!");
				}
			}
		}
	</script>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读