jQuery 对 ajax 操作进行了封装,在 jQuery 中 $.ajax() 属性最底层的方法,第2层是 load()、$.get() 和 $.post() 方法,第3层是 $.getScript() 和 $.getJSON() 方法。

load()

  load() 方法是 jQuery 中最简单和常用的 ajax 方法,使用 load() 方法通过 ajax 请求加载服务器中的数据,并把返回的数据放置到指定的元素中。

  【调用格式】

  load() 方法的调用格式为如下所示,参数 url 为加载服务器地址,可选项 data 参数为请求时发送的数据,callback 参数为数据请求成功后,执行的回调函数。

    <script>
$('#id').load(url,[data],[callback]);
</script>

  load() 方法默认使用 "GET" 方式,如果 data 参数提供一个对象,那么使用 "POST" 方式。

$.get() 和 $.post()

  $.get() 方法使用一个 "GET" 请求从服务器加载数据。

  $.get() 方法的调用格式如下所示,url 表示一个包含发送请求的 URL 字符串;data 表示发送给服务器的字符串或 Key/value 键值对;success(data, textStatus, jqXHR) 表示当请求成功后执行的回调函数;dataType 表示从服务器返回的预期的数据类型。

  $.post() 方法使用一个 "POST" 请求从服务器加载数据。post() 方法和 get() 方法的结构和使用方式都相同。但要注意的是,当load()方法带有数据参数传递时,会使用POST方式发送请求

    <script>
$.get('test.php',{
name: shane
},function(data){
//回调函数
}) $.post('test.php',{
num: $('#num').val()
},function(data){
//回调函数
})
</script>

getJSON() 和 getScript() 

  getJSON() 方法使用一个 "GET" 请求从服务器加载 JSON 编码的数据。

  getJSON() 方法的调用格式如下。其中,url 参数为请求加载 json 格式文件的服务器地址,可选项 data 参数为请求时发送的数据,callback 参数为数据请求成功后,执行的回调函数。回调函数中的第一个参数表示返回的数据。

  getScript() 方法使用一个 "GET" 请求从服务器加载并执行一个 javascript 文件。

  getScript() 方法调用格式如下,参数 url 为服务器请求地址,可选项 callback 参数为请求成功后执行的回调函数。

    <script>
$.getJSON(url,[data],function (data) {
//data: 返回的数据
}) $.getScript('test.js',function(){ })
</script>

$.ajax()

  $.ajax()方法是最底层、功能最强大的请求服务器数据的方法,前面介绍的 load()、get()、post()、getScript()、getJSON() 等方法都是基于 ajax() 方法实现的。

  常用参数如下所示:

  • async 布尔值,表示请求是否异步处理。默认是 true。
  • beforeSend(xhr) 发送请求前运行的函数。可以用来设置请求头。
  • cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
  • complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
  • contentType 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded"
  • context 为所有 AJAX 相关的回调函数规定 "this" 值。
  • data 规定要发送到服务器的数据。
  • dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
  • dataType 预期的服务器响应的数据类型。
  • error(xhr,status,error) 如果请求失败要运行的函数。
  • global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
  • ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
  • jsonp 在一个 jsonp 中重写回调函数的字符串。
  • jsonpCallback 在一个 jsonp 中规定回调函数的名称。
  • password 规定在 HTTP 访问认证请求中使用的密码。
  • processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
  • scriptCharset 规定请求的字符集。
  • success(result,status,xhr) 当请求成功时运行的函数。
  • timeout 设置本地的请求超时时间(以毫秒计)。
  • traditional 布尔值,规定是否使用参数序列化的传统样式。
  • type 规定请求的类型(GET 或 POST)。
  • url 规定发送请求的 URL。默认是当前页面。
  • username 规定在 HTTP 访问认证请求中使用的用户名。
  • xhr 用于创建 XMLHttpRequest 对象的函数。

数据序列化

  当一个表单中字段较多,表单元素较复杂时,就需要一种方法来简化提取表单内部控件的值的操作,这一行为通常叫序列化,jQuery 提供了 param()、serialize() 和 serialzeArray() 这三个方法。

  param(obj) 方法用来创建一个数组或对象序列化的字符串,适用于一个 URL 地址查询字符串或 Ajax 请求。

  serialize() 方法将用作提交的表单元素的值编译成字符串,serialize() 方法的一个额外好处是会自动对键值对儿中的特殊字符进行编码。

  serializeArray() 方法将用作提交的表单元素的值编译成拥有 name 和 value 对象组成的数组,即 json 格式的数据。

 

jacascript Ajax 学习之 JQuery-Ajax的更多相关文章

  1. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  2. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. jQuery学习之jQuery Ajax用法详解(转)

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  4. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. AJAX学习笔记——jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...

  6. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

  7. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  8. Ajax/XHR/HTTP/jQuery Ajax

    Ajax即通过XHR API使用js发起的异步网络请求,它不会导致页面刷新,因此是现代Web App的关键技术. HTTP协议是Web开发中最重要的网络协议,HTTP协议详细规定了请求和响应报文. 请 ...

  9. Ajax学习系列——jQuery中Ajax的请求方式

    在jQuery中,Ajax常见的请求方式主要有4种. 1.$.ajax()返回其创建的XMLHttpRequest对象. $.ajax({ type:"POST", content ...

  10. Ajax学习(1)-简单ajax案例

    1.什么是Ajax? Ajax是Asynchronous JavaScript and XML 的缩写,即异步的Javascript和XML. 可以使用Ajax在不加载整个网页的情况下更新部分网页信息 ...

随机推荐

  1. Java_jdbc 基础笔记之四 数据库连接 (通用更新方法)

    /** * 写一个通用的更新方法 包括 INSERT. DELETE.UPDATE * 使用工具类 * @param sql */ public void update(String sql){ Co ...

  2. Tosca 给定义变量,取内容放到变量里

    可以在TOOLS里 buffer viewer里面搜索查自己的变量

  3. List和Array相互转换

    List<String> list = new ArrayList<String>(); list.add("1"); list.add("2&q ...

  4. Alternatives to Activiti for all platforms with any license

    Activiti Activiti is a light-weight workflow and Business Process Management (BPM) Platform targeted ...

  5. PHP 循环输出多重数组元素

    <?php $arr = array( array( array( array( array( ,, ) ) ), array( ,,) ) ), array(, , ) ); function ...

  6. Linux_CentOS 文件管理和目录管理

    Linux 文件管理 1.创建文件 touch file1 2.删除文件 rm -rf file11 -r:递归的删除目录下面文件以及子目录下文件. -f:强制删除,忽略不存在的文件,从不给出提示 3 ...

  7. Python适配器模式代码

    Python设计模式之适配器模式,代码,思考等 # -*- coding: utf-8 -*- # author:baoshan class Computer: def __init__(self, ...

  8. Nginx之https配置 - 运维笔记 (http->https强转)

    一.Nginx安装(略)安装的时候需要注意加上 --with-http_ssl_module,因为http_ssl_module不属于Nginx的基本模块.Nginx安装方法: # ./configu ...

  9. 算法习题---5.12城市正视图<离散化应用>(Uva221)*****

    一:题目 给定n坐房子的西南角坐标x, y.还有宽度w,长度d(其实没用),高度h.问从南面看过去能看到几座房子. 城市俯视图和主视图 注意: 输出主视图中能够看到的所有建筑物按照左下角x坐标从小到大 ...

  10. 谷歌Chrome浏览器 截取网页长图方法

    Chrome浏览器: 1.按F12打开调试页面 2.按下ctrl + shift + p 3.输入命令 Capture full size screenshot 并回车 4.浏览器会自动截取整个网页内 ...