AJAX实现异步提交表单

心动音符

浏览: 336898 次
性别:
来自: 北京

最近访客更多访客>>

fql314

KevinLoveDev

528062596

chencvgk

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax PHP Microsoft HTML

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

方法 : 在表单页点击submit后在当前页使用AJAX提交表单数据,通过一个处理表单文件处理后.在当前页做提交后的操作,
ajax.js

var XMLHttp = {
    _objPool: [],
 
    _getInstance: function ()
    {
        for (var i = 0; i &gt; 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 &lt; 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(”?”) &gt; 0)
                {
                    url += “&amp;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 &amp;&amp; (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(’&amp;’);
 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{
   //其它.... 
}

分享到：