• jquery发起get/post请求_或_获取html页面数据


     备注:我们经常会遇到使用jquery获取某个地址下的部分页面内容,然后替换当前页面对应内容,也就是:局部刷新功能。

    当然也可以使用get/post请求获取数据,修改数据,可以参考以下JS代码:

    走过的坑:

    1-$.ajax   参数:  dataType  是区分大小写的,写成了datatype会不识别的???

    2- window["Ajax"] = Ajax;   写为:  window["Ajax"] =new Ajax();    这种单例如果作为全局变量报错的话,在高并发的请求下会出现: window.Ajax 实例里参数信息是会共享,参数信息被覆盖等问题???

    3-$.ajax Post/Get  回调方法使用window.Ajax和this访问属性,这里经过改造后,在函数里面声明一个: var _this=this;  就可以在回调函数内部实现 内部实例数据共享了,也会防止出错???

    下面JS的使用示例:

    new window.Ajax().Init_Two("postUrl", { u: userid, e: base64Email, t: token }, function (jsonData) {
      //success code
    }).Post();

    自定义模拟类-其中Init()方法是个人项目需要使用,大家可以使用Init_Two方法初始化,如上示例:

    // 2-Ajax模拟类
    var Ajax = function () {
        var _this = this;
        //请求路径
        _this.ajaxUrl = "";
        //传入的参数对象
        _this.data = {};
        //返回数据类型:json/jsonp/xml/text...
        _this.dataType = "text";
        //是否异步
        _this.isAsync = true,
        //回调函数
        _this.rollBack = function (result) {
        };
    
        _this.Init = function (handlerName, actionName, dataObject, rollBack) {
            _this.ajaxUrl = "/ajax/" + handlerName + ".js?action=" + actionName;
            _this.data = dataObject;
            _this.rollBack = rollBack;
            return _this;
        };
        _this.Init_Two = function (actionUrl, dataObject, rollBack) {
            _this.ajaxUrl = actionUrl;
            _this.data = dataObject;
            _this.rollBack = rollBack;
            return _this;
       };
    
        //Get请求
        _this.Get = function (dataType, isAsync) {
            if (dataType != null) {
                _this.dataType = dataType;
            };
            if (isAsync != null) {
                _this.isAsync = isAsync;
            };
            $.ajax({
                type: "GET",
                url: _this.ajaxUrl,
                data: _this.data,
                dataType: _this.dataType,
                async: _this.isAsync,//false代表只有在等待ajax执行完毕后才执行
                success: function (json) {
                    var result = json;
                    if (_this.dataType == "text") {
                        try {
                            result = JSON.parse(json);
                        } catch (e) {
                            result = new Function("return " + json)();
                        }
                    }
                    if (_this.rollBack && _this.rollBack instanceof Function) {
                        _this.rollBack(result);
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        };
        //获取请求地址的HTML内容(select选择器,是否异步)
        _this.GetHtml = function (jquerySelectDom, isAsync) {
            if (isAsync != null) {
                _this.isAsync = isAsync;
            }
            $.ajax({
                type: "GET",
                url: _this.ajaxUrl,
                data: _this.data,
                dateType: "html",
                //false代表只有在等待ajax执行完毕后才执行
                async: _this.isAsync,
                success: function (data) {
                    if (jquerySelectDom != "") {
                        var $data = $(data);
                        //由于$data是个集合,得到的是所有一级节点的jquery集合,所以,先从一级集合中找,再从所有子元素中找
                        var $result = $data.next(jquerySelectDom);
                        if ($result.length == 0) {
                            $result = $data.find(jquerySelectDom);
                        }
                        var resultHtml = "";
                        if ($result.length > 0) {
                            resultHtml = $result.html();
                        }
                        if (_this.rollBack && _this.rollBack instanceof Function) {
                            _this.rollBack(resultHtml);
                        }
                    } else {
                        return data;
                    }
                }
            });
        };
        //普通Post请求(请求地址:postUrl,,是否异步)
        _this.Post = function (dataType, isAsync) {
            if (dataType != null) {
                _this.dataType = dataType;
            };
            if (isAsync != null) {
                _this.isAsync = isAsync;
            };
            $.ajax({
                type: "POST",
                url: _this.ajaxUrl,
                data: _this.data,
                dataType: _this.dataType,
                //false代表只有在等待ajax执行完毕后才执行
                async: _this.isAsync,
                success: function (json) {
                    var result = json;
                    if (_this.dataType == "text") {
                        try {
                            result = JSON.parse(json);
                        } catch (e) {
                            result = new Function("return " + json)();
                        }
                    }
                    if (_this.rollBack && _this.rollBack instanceof Function) {
                        _this.rollBack(result);
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        };
        //模拟Form表单请求-参数为FormData对象
        _this.FormPost = function () {
            $.ajax({
                type: "POST",
                url: _this.ajaxUrl,
                data: _this.data,
                //false代表只有在等待ajax执行完毕后才执行
                async: _this.isAsync,
                processData: false,
                contentType: false,
                success: function (json) {
                    try {
                        result = JSON.parse(json);
                    } catch (e) {
                        result = new Function("return " + json)();
                    }
                    if (_this.rollBack && _this.rollBack instanceof Function) {
                        _this.rollBack(result);
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        };
    };
    window["Ajax"] = Ajax;
  • 相关阅读:
    java中数组的相关知识
    如何搭建Java开发环境(包括下载、安装和配置JDK)和Eclipse的安装
    java 8种基本数据类型的默认值及所占字节数
    C语言编写的简单的电话本管理系统
    C语言题库的上机题
    Spring Boot使用AJAX从数据库读取数据异步刷新前端表格
    JS,jQuery获取select标签中选中值的方法
    jQuery效果与扩展:左右滑动
    使用EasyUI创建分页对比效果
    一些关于链表操作的代码
  • 原文地址:https://www.cnblogs.com/lxhbky/p/9396183.html
Copyright © 2020-2023  润新知