ajax实现异步提交表单 -

czyaapy99

浏览: 9735 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7)

社区版块

存档分类

ajax实现异步提交表单

Ajax PHP Linux MySQL Microsoft

目的 : 不刷新网页完成表单提交和动态验证

方法 : 在表单页点击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);
}
};

分享到：