今天抽时间给大家整理jquery和ajax的相关知识


Posted in Javascript onNovember 17, 2015

hi,今天礼拜二,做点什么事呢,哎想起来了,正好前两天在一直都在学习ajax相关知识,今天接着学jquery和ajax的相关知识吧。

1、jQuery

-----jQuery与AJAX-----

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

相关阅读:jquery 框架使用教程 AJAX篇   AJAX初级教程之初识AJAX

----使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:

load(url,[data],[callback])

参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱吃的水果</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</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>
</body>

注意,用load()其中元素对空格敏感,比如url开头结尾不要有空格,比如function()后面不要有空格

----使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的一项运动</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<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>
</body>

----使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的运动</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<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>
</body>

----使用get()方法以GET方式从服务器获取数据

使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(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>
</body>

----使用post()方法以POST方式从服务器发送数据

与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:

$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字是否大于0</span> 
<span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
</div>
<ul>
<li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
</ul>
</div>
<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>
</body>

这里的val()是得到之前的selector的值,jQuery的函数

----使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span> 
<span class="fr">
<input id="btnAction" type="button" value="序列化" />
</span>
</div>
<form action="">
<ul>
<li>姓名:<input name="Text1" type="text" size="12" /></li>
<li>
<select name="Select1">
<option value="0">男</option>
<option value="1">女</option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
<li id="litest"></li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
</body>

----使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。

<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字的奇偶性</span> 
<span class="fr">
<input id="btnCheck" type="button" value="检测" />
</span>
</div>
<ul>
<li>请求输入一个数字 
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>

----使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

<body>
<div id="divtest">
<div class="title">
<span class="fl">奇偶性和是否大于0</span> 
<span class="fr">
<input id="btnShow_1" type="button" value="验证1" />
<input id="btnShow_2" type="button" value="验证2" />
</span>
</div>
<ul>
<li>请求输入一个数字 
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success:function(data){$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
</body>

----使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">加载一段文字</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divtest").ajaxStart(function(){
$(this).html("正在请求数据...");
});
$("#divtest").ajaxStop(function(){
$(this).html("数据请求完成!");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}
});
})
});
</script>
</body>

-----jQuery常用插件-----

 ----表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:

$(form).validate({options})

其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表单验证插件</span> 
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">邮箱:</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{
required:true,
email:true
}
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
</html>
Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
javascript cookies操作集合
Apr 12 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
Vue.js学习示例分享
Feb 05 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 #Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 #Javascript
js弹出对话框方式小结
Nov 17 #Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 #Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 #Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
跟我学习javascript的undefined与null
Nov 17 #Javascript
You might like
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python numpy格式化打印的实例
2018/05/14 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
经贸专业毕业生求职信
2014/03/23 职场文书
服务标语口号
2014/07/01 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书