js进阶 14 jquery的ajax有哪些函数和事件(多练)
js进阶 14 jquery的ajax有哪些函数和事件(多练)
一、总结
一句话总结:常用:load、ajax、post、get、getScript()、getJSON()、表单序列化,ajax事件这8个板块。
二、jquery的ajax有哪些函数和事件
JAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。如果没有jQuery,AJAX编程还是有些难度的。
通过jQuery AJAX方法,能够使用HTTP Get和HTTP Post 从远程服务器上请求文本、HTML、XML或JSON-同时能够把这些外部数据直接载入网页的被选元素中。
load()方法
jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法。
- .load()从服务器加载数据,然后把返回到HTML放入匹配元素。
语法:load(url,data,function(response,status,xhr))
1.必需的URL参数规定您希望加载的URL。
2.可选的data参数规定与请求一同发送的查询字符串键/值对集合。
3.可选的callback参数是load()方法完成后所执行的函数名称
- 回调函数参数含义
1. responseTxt-包含调用成功时的结果内容
2. statusTXT-包含调用的状态:可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个,最长见的是:succes成功;error错误
3. Xhr-经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
get()和post()方法
两种在客户端和服务器端进行请求-响应的常用方法是:GET和POST.
GET基本上用于从服务器获得(取回)数据。注释:GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过,POST方法不会缓存数据,并且常用于连同请求一起发送数据。
- $.get(URL,callback);
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
- $.post(URL,data,callback);
参数
- 必需的URL参数规定您希望请求的URL。
- 可选的data参数规定连同请求发送的数据
- 可选的callback参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态
- type:返回内容格式,xml,html,script,json,text,_default。
$.getScript()和$.getJSON()方法
$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件
- getScript()通过HTTP GET请求载入并执行javaScript文件。
- 语法:$.getScript(url,function(response,status))
- response-包含来自请求的结果数据
- 3.Status-包含请求的状态(“success”,”error”,”notmodified”,”timeout”或“parsererror”)
- .getJSON(url,data,success(data,status,xhr))
- ur必需。规定将请求发送的哪个URL.
- data可选。规定连同请求发送到服务器的数据。
- function(response,status,xhr)可选。规定当请求成功时运行的函数。
$.ajax()
$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项,以获得更多的灵活性。
- 语法:$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
- 常用参数:
- url默认值:当前页地址。发送请求的地址。
- type请求方式(“POST”或”GET”),默认为”GET”。
- Success类型:Function请求成功后的回调函数。
- error请求失败时调用此函数。
- .........
表单序列化
- 语法:$(selector).serialize()
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax()
- serializeArray()序列化表格元素(类似'.serialize()'方法返回JSON数据结构数据。
’’’注意’’’此方法返回的是JSON对象而非JSON字符串。
ajax事件
$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项,以获得更多的灵活性。
- ajaxStart()AJAX请求开始时执行函数。
- ajaxStop()AJAX请求结束时执行函数。
- ajaxComplete()AJAX请求完成时执行函数。
- ajaxError()AJAX请求发生错误时执行函数。
- ajaxSuccess()AJAX请求成功时执行函数。
- ajaxSend()AJAX请求发送前执行函数。Ajax事件。
温馨提示
关于JS进阶课程就告一段落,希望经过这个课程的学习,js编写应用能有所提高,所谓学无止境,希望同学们平时多练习,学会查阅资料,学会自学的能力,举一反三。
js进阶 14 jquery的ajax有哪些函数和事件(多练)的更多相关文章
- js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化
js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...
- js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 14-2 如何用ajax验证登陆状态(这里用load方法)
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- js进阶 11-24 jquery如何实现选项卡的制作
js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 13-8 jquery如何实现侧边栏
js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,sl ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
随机推荐
- vue --- cli build 后的项目,图片路径出错
今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...
- SQL 查找存在某内容的存储过程
--查找存在某表名的存储过程 SELECT distinct b.name from syscomments a,sysobjects b WHERE a.id=b.id and a.TEXT LIK ...
- js垃圾回收机制理解
原理 找到不再被使用的变量,然后释放其占用的内存,但这个过程不是时时的,因为其开销比较大, 所以垃圾回收器会按照固定时间间隔周期性的执行 回收方式 a.标记清除 当变量进入环境时,将这个变量标记为“进 ...
- centos 7 mongodb4.0 安装配置
1.下载安装 cat <<EOF> /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0]name=MongoDB Repos ...
- linux下安装配置rabbitMQ
1.安装Erlang 由于RabbitMQ依赖Erlang, 所以需要先安装Erlang Erlang的安装方式大概有两种: 1.从Erlang Solution安装(推荐) # 添加erlang s ...
- WPF中Image控件的Source属性
原文:WPF中Image控件的Source属性 imgBook 是一个Image控件,在后台代码中我想给它指定Source的属性.我先如下方式进行: Uri uri = new Uri(strImag ...
- 【Henu ACM Round #12 E】Thief in a Shop
[链接] 我是链接,点我呀:) [题意] n个物品,每个物品都有无限个. 第i个物品的价格是一样都,都是ai 让你从中选出恰好k个物品 问你选出的物品的总价值 有多少种不同的可能. [题解] 可以用f ...
- 【玲珑杯 round#18 B】图论你先敲完模板
[Link]:http://www.ifrog.cc/acm/problem/1146 [Description] [Solution] 设f[i]表示在第i个点休息的话最少需要的体力值; f[i]= ...
- ZOJ 3690 & HDU 3658 (矩阵高速幂+公式递推)
ZOJ 3690 题意: 有n个人和m个数和一个k,如今每一个人能够选择一个数.假设相邻的两个人选择同样的数.那么这个数要大于k 求选择方案数. 思路: 打表推了非常久的公式都没推出来什么可行解,好不 ...
- Greenplum中定义数据库对象之创建与管理模式
创建与管理模式 概述:DB内组织对象的一种逻辑结构.一个DB内能够有多个模式.在未指定模式时默认放置在public中.能够通过"\dn"方式查看数据库中现有模式. testdw=# ...