Ajax发送Post请求

简介:

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请求

 

"); obj.focus(); return; } //不为空时。使用Ajax请求向后台发送信息,验证该username是否可用 //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("username可用!"); }else{ alert("username不可用!"); } } } </script>









本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5242988.html,如需转载请自行联系原作者
相关文章
|
25天前
|
XML 前端开发 JavaScript
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
59 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
74 4
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
99 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
59 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
33 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
43 4
|
3月前
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
27 6