七 jquery实现Ajax应用
1 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:
load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
例如,点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用。如下图所示:
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load(" http://www.imooc.com/data/fruit_part.html",function()) {
$this.attr("disabled", "true");
});
})
});
</script>
2 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
3 使用getScript()方法异步加载并执行js文件
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript ("http://www.imooc.com/data/sport_f.js",function(){
$this.attr("disabled", "true");
});
})
});
</script>
4 使用get()方法以GET方式从服务器获取数据
使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:
$.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
})
});
</script>
5 使用post()方法以POST方式从服务器发送数据
与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:
$.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php",{
num:$("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
6 使用serialize()方法序列化表单元素值
使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
7 使用ajax()方法加载服务器数据
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/carsInfo/saveCarsInfo.action",
async : false,
timeout : 30000,
dataType:'json',
data: $("#supportForm").serialize(), //
beforeSend: function(XMLHttpRequest){},
success: function(data, textStatus){
if(data==null||data.status==null){
alert("保存时发生错误");
return;
}
else{
if(data.status=="1"){
alert("保存成功");
var cars_no = data.cars_no;//获得车唯一标识号
$("#cars_no").val(cars_no);
var id = data.id;
$("#id").val(id)
status = 1;
$("#next_step").show();
$("#onSaveInfo").hide();
}
else if(data.status=="0"){
alert("保存失败");
return;
}
}
},
error: function(){
}
});
8 ajaxSetup()方法
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
9 ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。
ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。
八 jQuery常用插件
1 表单验证插件 表单验证插件——validate
2 表单插件 form
3 图片灯箱插件 lightBox
4 图片放大镜插件 jqzoom
5 cookie插件 cookie
6 搜索插件 autocomplete
7 右键菜单插件 contextmenu
8 自定义对象级插件 lifocuscolor插件
9 自定义类级别插件 twoaddresult
- 浏览: 109732 次
- 性别:
- 来自: 天津
文章分类
最新评论
发表评论
-
jquery中replaceWith()和replaceAll()
2016-02-20 20:26 702在jquery中,我们可以通过replaceWith()和 ... -
append,appendTo和prepend 区别
2016-02-20 20:20 7171.append(content) 向每个匹配的元素内部追 ... -
jquery面试题
2016-02-19 21:10 621jquery百度文库题 http://wenku.baid ... -
jquery 接受上一个jsp页面url中传过来的值
2016-02-15 16:20 451function editOrder(id,detail_i ... -
动态给select赋值
2016-02-14 21:28 14611 <select id="motorcy ... -
jquery设置disabled
2016-02-14 21:24 526设置组件disabled $("#invoice ... -
jquery中attr和prop的区别
2016-02-14 21:07 605原文:http://www.cnblogs.com/Show ... -
jquery 选中checkbox和RadioButton
2016-02-14 21:02 593一 checkbox选中 1 判断checkbox是否选中 ... -
jQuery学习笔记 二
2016-02-04 08:44 375四 JQuery操作DOM元素1 使用attr()方法控制 ... -
jQuery学习笔记 一
2016-02-04 08:44 534一 jquery基础选择器<script src=& ...
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
jquery 学习笔记源码 3jquery常规选择器
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记,总结超经典!
这是关于JQuery的学习过程中的一个笔记,当中记载了很多注意事项以及技巧,值得一看
jquery学习笔记附带例子,希望对新手有帮助