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异步对象,即XMLHttpRequest
function 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="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 = 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提交方式的更多相关文章
- 关于Ajax的type为post提交方式出现请求失效问题
最近碰到这样一个问题,原本一个ajax异步提交数据之前是很好的,很多系统都延用了均未出现任何问题.最近这个版本却出现ajax方式post数据不到后台程序,让我折腾了好几天.起初的ajax是这样写的: ...
- ajax参数contentType与数据提交方式
使用bootstrapTable时,服务器端无法获取参数(flask,request.form.get方法),检查发现是因为ajax提交的时候,方式是payload,要想用form提交,需要设置con ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- ajax的post提交方式和传统的post提交方式哪个更快?
如果同时用ajax和post提交先执行哪个呢?是ajax返回后再执行post呢还是同时执行? ajax的post提交方式和传统的post提交方式哪个更快? >> php这个答案描述的挺清楚 ...
- 四种常见的 POST-------- content-type数据提交方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- ASP.NET MVC 表单的几种提交方式
下面是总结一下在ASP.NET MVC中表单的几种提交方式. 1.Ajax提交表单 需要引用 <script type="text/javascript" src=" ...
- 【整理】Ajax异步实现的几种方式总结
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.GET ...
随机推荐
- PC/SC
简介 PC/SC规范由微软公司与世界其它著名的智能卡厂商组成的PC/SC工作组提出的.PC/SC规范是一个基于WINDOWS平台的一个标准用户接口(API),提供了一个从个人电脑(Personal C ...
- java.util.Timer分析源码了解原理
Timer中最主要由三个部分组成: 任务 TimerTask . 任务队列: TaskQueue queue 和 任务调试者:TimerThread thread 他们之间的关系可以通过下面图示: ...
- padding-bottom布局解析;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu5461 Largest Point(沈阳网赛)
Largest Point Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- Socks5协议中文文档
译者:Radeon(Radeon bise@cmmail.com) 译文公布时间:2001-6-18 文件夹 1.介绍 2.现有的协议 3.基于TCP协议的客户 4.请求 5.地址 6.应答 7.基于 ...
- 开发者工具console
**(2)$0 - $4 ** 控制台保存了最近5个在Elements面板选中的DOM元素,$0代表倒数第一个,$1代表倒数第二个,以此类推直到$4. 按f12,就会出现开发者工具,然后在左上角有个放 ...
- image元素的src属性值与getAttribute('src')值
采集的时候,当采集到一些不可用的照片就将其剔除掉 我的解决思路是new一个img对象, 然后将采集过来的图片赋值给这个img, 然后分别处理img的onerror和 onload, 当在onerror ...
- English - because of,due to ,thanks to ,owing to ,as a result of ,on account of解析
because of,due to ,thanks to ,owing to ,as a result of ,on account of 等都可以用来表示原因,但其用法却各有不同.下面就其用法分述如 ...
- 使用x manager 连接Linux桌面
/usr/bin/xterm -ls -display $DISPLAY 需要安装xterm 服务
- 【转】iOS隐藏导航条1px的底部横线
默认情况下会有这条线 第一种方法: 1 2 3 4 5 6 UINavigationBar *navigationBar = self.navigationController.navigationB ...