天天看点

利用jQuery Ajax loading图片

beforesend:出现一些提示信息和loading图片。

complete:隐藏loading图片

"xml": 返回 xml 文档,可用 jquery 处理。

"html ": 返回纯文本 html 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 javascript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有post请求都将转为get请求。(因为将使用dom的script标签来加载)

"json": 返回 json 数据 。

"jsonp": jsonp 格式。使用 jsonp 形式调用函数时,如 "myurl?callback=?" jquery 将自动替换 ? 为正确的函数名,以执行回调函数。 

"text": 返回纯文本字符串

1 、请求页面 ajax.aspx

html 代码

利用jQuery Ajax loading图片

<div>  

<input id="txtname" type="text" />  

<input type="button" value="查看用户名是否存在" id="btn" onclick="judgeusername();" />  

<div id="showresult" style="float: left"></div>  

</div>  

js 代码

利用jQuery Ajax loading图片

<script type="text/javascript">  

function judgeusername(){  

    $.ajax({  

        type:"get",  

        url:"ajaxuserinfomodify.aspx",  

        datatype:"html",  

        //contenttype:'application/x-www-form-urlencoded;charset=utf-8',  

        data:"username="+$("#txtname").val(),  

        beforesend:function(xmlhttprequest)  

        {  

            $("#showresult").text("正在查询");  

            //show loading images  

            //pause(this,100000);  

        },  

        success:function(msg)  

            $("#showresult").html(msg);  

            $("#showresult").css("color","red");  

        complete:function(xmlhttprequest,textstatus)  

            //隐藏正在查询图片  

        error:function()  

            //错误处理  

        }  

    });  

}  

</script>   

2 、页面 ajaxuserinfomodify.aspx

利用jQuery Ajax loading图片

protected void page_load(object sender, eventargs e)  

    {  

        string username = request.querystring["username"].tostring ();  

        if (username == "james hao")  

            response.write ("用户名已经存在!");  

        else  

            response.write ("您可以使用此用户名!");  

}   

3 、运行界面

(1)初始化界面

利用jQuery Ajax loading图片

(2)正在查询提示页面

利用jQuery Ajax loading图片

(3) 验证用户名已经存在页面

利用jQuery Ajax loading图片

(4)  验证用户名未存在页面

利用jQuery Ajax loading图片

至此 ajax验证用户名是否存在的功能已经完成。