Ajax通用

最新推荐文章于 2021-08-06 11:48:54 发布

Kotak

最新推荐文章于 2021-08-06 11:48:54 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_45174508/article/details/112245729

版权

Ajax

功能：局部刷新判断用户名是否注册过
外部js文件

function f1(param) {
        var xmlHttp;
        try {
            // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer
            try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("您的浏览器不支持AJAX！");
                    return false;
                }
            }
        }

		//如果是post请求 send传递数据
        if ("POST"==param.method||"post"==param.method){
            xmlHttp.open(param.method,param.url,true);
            //告诉服务器端该请求是一个post请求，防止被服务器认为是get而报错
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.send(param.data);
        } else {
        //如果是get请求，地址栏传递数据
            xmlHttp.open(param.method,param.url+"?"+param.data,true);
            xmlHttp.send();
        }

        xmlHttp.onreadystatechange=function(){
            if (xmlHttp.readyState==4&&xmlHttp.status==200){
                //接收数据
                var data= xmlHttp.responseText;
                param.callback(data);
            }
        }


    }

jsp界面

<form method="post" action="UserServlet/addUser" enctype="multipart/form-data">
    ename<input type="text" name="ename" id="aname" onblur="f3()"><span id="addSpanName"></span><br>
</form>

引用

<head>
	//引入JQ
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    //引入外部js文件 里面有ajax通用方法
    <script type="text/javascript" src="js/ajax.js"></script>
</head>

<script>
//封装了一个pa对象，调用js里面的ajax的f1方法，pa作为参数传递进去
        function f3() {
        //pa就是param，js文件里的param.method,url之类的，在这里定义然后传递使用
            var pa={
                method:"get",
                url:"AAddUserServlet",
                data:"aname="+$("#aname").val(),
                callback:function (data) {
                    console.log($("#aname").val());
                    if (data=="ok"){
                        $("#addSpanName").css("color","green");
                    } else {
                        $("#addSpanName").css("color","red");
                    }
                    $("#addSpanName").html(data);
                }
            }
            f1(pa);
        }
</script>

Kotak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax通用

Ajax外部js文件function f1(param) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new Ac
复制链接

扫一扫