博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery发起get/post请求_或_获取html页面数据
阅读量:5327 次
发布时间:2019-06-14

本文共 5291 字,大约阅读时间需要 17 分钟。

 备注:我们经常会遇到使用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;

 

转载于:https://www.cnblogs.com/lxhbky/p/9396183.html

你可能感兴趣的文章
Swift 可选(Optionals)类型
查看>>
单表查询
查看>>
Node.js入门:文件查找机制
查看>>
C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符
查看>>
[Luogu] 被污染的河流
查看>>
[LeetCode] Remove Duplicates from Sorted List 移除有序链表中的重复项
查看>>
[LeetCode] Range Sum Query 2D - Immutable 二维区域和检索 - 不可变
查看>>
[CareerCup] 17.1 Swap Number In Place 互换位置
查看>>
[LintCode] Swap Nodes in Pairs 成对交换节点
查看>>
[LintCode] Backpack VI 背包之六
查看>>
[LeetCode] Redundant Connection 冗余的连接
查看>>
2015/6/9 站立会议以及索引卡更新
查看>>
iptables 端口转发--内网实现上网
查看>>
SQL Server 2012 Express LocalDB 的作用
查看>>
nyist 488 素数环
查看>>
sort函数
查看>>
各种波形文件(wlf/vcd/fsdb/shm/vpd)的区别及生成方法(转)
查看>>
Day1-T4
查看>>
C语言中浮点数在内存中的存储方式
查看>>
互联网时代,有声读物是否能分一杯羹?
查看>>