目的 : 不刷新网页完成表单提交和动态验证
方法 : 在表单页点击submit后在当前页使用AJAX提交表单数据,通过一个处理表单文件处理后.在当前页做提交后的操作,
ajax.js
var XMLHttp = {
_objPool: [],
_getInstance: function ()
{
for (var i = 0; i > this._objPool.length; i ++)
{
if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
{
return this._objPool[i];
}
}
// IE5中不支持push方法
this._objPool[this._objPool.length] = this._createObj();
return this._objPool[this._objPool.length - 1];
},
_createObj: function ()
{
if (window.XMLHttpRequest)
{
var objXMLHttp = new XMLHttpRequest();
}
else
{
var MSXML = [’MSXML2.XMLHTTP.5.0′, ‘MSXML2.XMLHTTP.4.0′, ‘MSXML2.XMLHTTP.3.0′, ‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’];
for(var n = 0; n < MSXML.length; n ++)
{
try
{
var objXMLHttp = new ActiveXObject(MSXML[n]);
break;
}
catch(e)
{
}
}
}
// mozilla某些版本没有readyState属性
if (objXMLHttp.readyState == null)
{
objXMLHttp.readyState = 0;
objXMLHttp.addEventListener(”load”, function ()
{
objXMLHttp.readyState = 4;
if (typeof objXMLHttp.onreadystatechange == “function”)
{
objXMLHttp.onreadystatechange();
}
}, false);
}
return objXMLHttp;
},
// 发送请求(方法[post,get], 地址, 数据, 回调函数 , 异步)
sendReq: function (method, url, data, callback , XMLHttpbool)
{
if(!XMLHttpbool) XMLHttpbool = true;
var objXMLHttp = this._getInstance();
with(objXMLHttp)
{
try
{
// 加随机数防止缓存
if (url.indexOf(”?”) > 0)
{
url += “&randnum=” + Math.random();
}
else
{
url += “?randnum=” + Math.random();
}
open(method, url, XMLHttpbool);
// 设定请求编码方式
setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
send(data);
onreadystatechange = function ()
{
if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
{
callback(objXMLHttp);
}
}
}
catch(e)
{
alert(e);
}
}
},
/*
* form 表单
* url 处理文件名
* func 提交后的处理方法
*/
formSubmit : function(form , url , func){
if(typeof form != ‘object’){
var form = document.getElementById(form);
}
var ele = form.elements;
var post = new Array();
for(var i = 0 ; i<ele.length ; i++ ){
//只考虑了 <input type="text" /> 其它的要加些 if ...
post[i] = ele[i].value;
}
var data = post.join(’&’);
this.sendReq('post' , url , data , func , false);
}
};
form.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>
<script type="text/javascript" src=''ajax.js"></script>
<script type="text/javascript">
function response(XMLHttp){
eval(XMLHttp.responseText);
}
function ajaxSubmit(form){
var url = 'action.php' ; //处理文件
XMLHttp.formSubmit(form , url , response);
}
</script>
</head>
<body>
<form onsubmit="ajaxSubmit(this);return false;">
<input type='text' name='fieldName' />
<input type='submit' value='Submit' />
</form>
</body>
</html>
action.php
if(isset($_POST['submit'])){
if(正确){
//...........入库.......
echo 'alert("完成"); location="/'';';
exit;
} else{
echo 'alert("出错");';
exit;
}
}else{
//其它....
}
标签: AJAX
仿ADODB的MySQL操作类 DB.php Linux下文件的压缩与解压缩
天上的星星
十一 19th, 200800:03回复 | 引用 | #1 /*
* form 表单
* url 处理文件名
* func 提交后的处理方法
*/
formSubmit : function(form , url , func){
if(typeof form != ‘object’){
var form = document.getElementById(form);
}
var ele = form.elements;
var post = new Array();
for(var i = 0 ; i 0 ){
url += ‘&sessionid=’+Math.random();
}else{
url += ‘?sessionid=’+Math.random();
}
var data = post.join(’&’);
this.sendReq(’post’ , url , data , func , false);
}
};
分享到:
相关推荐
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
使用jQuery.form插件,实现完美的表单异步提交
ajax提交的jq版本,相当实用
Ajax存在问题就是在异步情况下无法控制什么时候完成记录显示,本人根据回调方法封装了个类,能够将回调方法用参数方式指定,使ajax调用结束后调用回调方法,吧内容传回。ajaxSubmitToDivCallback(显示内容div,提交...
嵌入式liunx下,基于boa,cgi的ajax 表单异步提交demo。
java中异步 提交表单请求Ajax形式
下面小编就为大家带来一篇纯javascript的ajax实现php异步提交表单的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Ajax异步提交表单数据的说明及方法实例,需要的朋友可以参考一下
vs2013 利用Ajax+Jquery实现异步进度条效果
Ajax使用jQuery提交表单 文件
异步提交 表单的提交 可以实现无刷新页面提交
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的; 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用...
本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...
jQuery异步提交表单 gailan.apply(gailan, { selectPostFrom:function(){ var data = jQuery("#frmAppendix").formSerialize(); jQuery.ajax({ type:"POST", url:"./selectSubmit.jsp", data:data, success:...
AJAX实现页面表格的添删改查操作,异步刷新,有温馨手册,直接部署到项目即可使用,数据库已备,非常方便的代码。
本文为大家分享了两种jQuery异步提交表单的方式,具体内容如下 第一种方式:普通ajax方式提交 $(function(){ $('#send').click(function(){ $.ajax({ type: GET, url: GLOBAL_PATH + /Enterprise/...
Ajax异步的特点为:多个事件并行发生,事件互不影响,请求之后,不刷新整张页面,页面不动,只是刷新页面的局部。异步数据获取技术 XMLHttpRequest对象方法: open("请求方式GET/POST","页面地址",true):与...
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下