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请求
<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("username不能为空! ");
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>
Ajax发送Post请求的更多相关文章
- 使用Ajax发送http请求(get&post请求)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
- AJAX发送PUT请求引发的血案
如果直接发送ajax=put形式的请求 是拿不到请求体中的数据的. Tomcat: 1.将请求体中的数据,封装一个map ...
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- Ajax发送POST请求对数据的封装
Ajax发送POST请求把数据到后端后,后端收到数据并解析出来 示列一: Ajax发送请求,这里主要是发送一个数组的数据类型到后端,如果没有先把数组进行格式化成字符串的话,后端就收了就是一个字符串类型 ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应
POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...
- IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应
GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...
- Ajax发送XML请求案例
Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...
- ajax发送PUT请求,使用HttpPutFormContentFilter过滤器接受办法
相信在使用ajax发送put请求时候,肯定遇到过后端数据无法被接受到的405错误. 为什么会遇到这个问题? 1.首先查看Tomcat源码 关于如何将数据封装到Request public class ...
随机推荐
- [RxJS] Reactive Programming - Sharing network requests with shareReplay()
Currently we show three users in the list, it actually do three time network request, we can verfiy ...
- Oracle数据库的创建与验证
创建数据库,输入命令dbca创建数据库 会弹出创建数据库相应的对话框 单击下一步 选择创建一个数据库,并单击下一步 数据库模板选择一般目的的转换过程即可.单击下一步 全局数据库名称和SID名称,要和上 ...
- ORA-02069: global_names parameter must be set to TRUE for this operation
原因:在对远程表增删改操作的时候,调用了本地函数. 比如:insert into trans_load_rate@DC values(rate_s(1)); trans_load_rate是DC库的 ...
- 3D图片采集与展示(SurfaceView 自适应 Camera, 录制视频, 抽取帧)
最近在做一个3D图片采集与展示. 主要功能为:自定义Camera(google 已经摈弃了Camera, 推荐使用Camera2,后续篇幅,我将会用Camera2取代Camera),围绕一个物体360 ...
- C#中DataTable转化JSON
[WebMethod(Description = "将一个DataTable对象转化成JSON")] public string GetJSON() { JavaScriptSer ...
- .net中div置于顶层+iframe
aspx代码: <td> <asp:Button ID="BtnDownPPT" runat="server" OnClientClick= ...
- 在App中混合HTML5开发App如何实现的。在App中使用HTML5的优缺点是什么?
参考答案: 在iOS中,通常是通常UIWebView来实现,当然在iOS8以后可以使用WKWebView来实现.有以下几种实现方法: 通过实现UIWebView的代理方法来拦截,判断scheme是否是 ...
- UIScrollView的属性
属性 作用 CGPoint contentOffSet 监控目前滚动的位置 CGSize contentSize 滚动范围的大小 UIEdgeInsets contentInset 视图在scroll ...
- Linux中的常见配置文件
网络服务端口 /etc/services
- CSSOM视图模式
相关技术文章: CSSOM视图模式(CSSOM View Module)相关整理 W3C CSSOM View Module