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

jquery发起get/post请求_或_获取html页面数据的更多相关文章

  1. MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求

    在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递,在这里,笔者为初学者介绍两种在MVC中常用的异步请求处理方式. 在这里,我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为 ...

  2. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. jquery中如何以逗号分割字符串_百度知道

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 2、尚硅谷_SSM高级整合_使用ajax操作实现页面的查询功能

    16.尚硅谷_SSM高级整合_查询_返回分页的json数据.avi 在上一章节的操作中我们是将PageInfo对象存储在request域中,然后list页面解析request域中的对象实现信息的显示. ...

  5. jQuery jsonp跨域请求

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  6. js分析 天_眼_查 字体文件

    0. 参考 js分析 猫_眼_电_影 字体文件 @font-face 1. 分析 1.1 定位目标元素 1.2 查看网页源代码 1.3 requests 请求提取得到大量错误信息 对比猫_眼_电_影抓 ...

  7. 软件测试_Loadrunner_APP测试_性能测试_脚本优化_脚本回放

    本文主要写一下在使用Loadrunner录制完毕APP脚本之后如何对脚本进行回放,如有不足,欢迎评论补充. 如没有安装Loadrunner软件,请查看链接:软件测试_测试工具_LoadRunner: ...

  8. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  9. JavaWeb_day04搜索_乱码_路径_转发重定向_cookie

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 搜索功能 DAO层都是一些数据库的增删改查操作 Ser ...

随机推荐

  1. CSS伪类的理解

    因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只 ...

  2. 基于react可无限向内部添加节点的tree

    这两天学习react,撸了一遍文档后开始自己动手写点东西. 正好从朋友那得到灵感,写一个小例子. 这个东西是这样的,就是点击的这个节点就往它里面添加一个child. 于是乎!我想到的就是用自调函数,递 ...

  3. JSHFJK师德师风幅度十分时尚大方JSHFJK

    sdjfhjksd{104411661166112205880477047710881111099909771088104411111155116605880533055505330500051104 ...

  4. #224 Profile Lookup (for in & if )

    我们有一个对象数组,里面存储着通讯录. 函数 lookUp 有两个预定义参数:firstName值和prop属性 . 函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人.如果存 ...

  5. 升讯威微信营销系统开发实践:(1)功能概要与架构设计( 完整开源于 Github)

    GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限,不会再对现有代码进行更新维护,不过微信接口比较稳定,经测试至 ...

  6. 包建强的培训课程(15):Android App热修复技术

    @import url(/css/cuteeditor.css); Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈 ...

  7. 从NoSQL到NewSQL,谈交易型分布式数据库建设要点

    在上一篇文章<从架构特点到功能缺陷,重新认识分析型分布式数据库>中,我们完成了对不同"分布式数据库"的横向分析,本文Ivan将讲述拆解的第二部分,会结合NoSQL与Ne ...

  8. Java中的NIO基础知识

    上一篇介绍了五种NIO模型,本篇将介绍Java中的NIO类库,为学习netty做好铺垫 Java NIO 由3个核心组成,分别是Channels,Buffers,Selectors.本文主要介绍着三个 ...

  9. Crontab和sudo中无法使用TensorFlow ImportError libcublas.so.9.0

    最近因为特殊的原因重新安装了python,但是引发了一个很严重的问题--TensorFlow不好使了. 比如我下面这个执行文件test.py: import tensorflow as tf prin ...

  10. IDEA中使用lombok插件

    Lombok是什么? lombok是一个可以通过简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 Java 代码的工具,简单来说,比如我们新建了一个类,然后在其中写了几个字段,然后通常情况下 ...