jQuery:自学笔记(5)——Ajax

使用Ajax快捷函数

  说明

    出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数.

    

  实例

    1.显示 test.php 返回值(HTML 或 XML,取决于返回值)。

      $.get("test.php", function(data){
          alert("Data Loaded: " + data);
      });

    2.向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

      $.post("test.php", { name: "John", time: "2pm" },
         function(data){
           alert("Data Loaded: " + data);
         });

    3.从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

      $.getJSON("test.js", function(json){
        alert("JSON Data: " + json.users[3].name);
      });


    4.加载 feeds.html 文件内容

      $("#feeds").load("feeds.html");
 

使用底层函数Ajax()

  说明

      在jQuery中,所有的AJAX快捷函数都是基于一个基本的Ajax()函数,该函数提供Ajax的详细的配置入口,可以对Ajax进行更为深入的的控制 ,提供一些比较特殊的应用场景。    

  回调函数

     如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
      • beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
      • error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
      • dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
      • success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
      • complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

  实例

    1.加载并执行一个 JS 文件。

      $.ajax({
        type: "GET",
        url: "test.js",
        dataType: "script"
      });

    2.保存数据到服务器,成功时显示信息。

      $.ajax({
          type:"POST",
          url:"some.php",
          data:"name=John&Age=18",
          success:function(msg)
          {alert(msg)}
      })

Ajax的全局配置和事件

  全局事件

  

  实例

    AJAX 请求失败时显示信息

    $("#msg").ajaxError(function(event,request, settings){ $(this).append("<li>出错页面:" + settings.url + "</li>"); });

jQuery:自学笔记(5)——Ajax的更多相关文章

  1. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

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

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  3. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  4. jQuery:自学笔记(3)——操作DOM

    jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...

  5. jQuery:自学笔记(2)——jQuery选择器

    jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...

  6. jQuery自学笔记(一):初识jQuery

    jQuery 是一个 JavaScript 函数库, jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数,引用jQuery应该注意: <script&g ...

  7. jQuery学习笔记(Ajax)

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

  8. jQuery自学笔记(二):jQuery选择器

    一.简单选择器 ID选择器:$('#box') 元素标签名:$('div') 类选择器:$('.box') jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一 ...

  9. jQuery自学笔记(四):jQuery DOM节点操作

    获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...

随机推荐

  1. Java时间类总结

    java.util.Date 包含有年月日时分秒,精确到毫秒级别. 官方解释: // The class Date represents a specific instant in time, wit ...

  2. hive 添加UDF(user define function) hive的insert语句

    add JAR /home/hadoop/study/study2/utf.jar; package my.bigdata.udf; import org.apache.hadoop.hive.ql. ...

  3. tcpreplay工具安装使用

    一.Tcpreplay功能简介 首先推荐一个网站:http://tcpreplay.synfin.net/ ,上面有Tcpreplay的安装包和很多文档,包括手册.man页和FAQ等. Tcprepl ...

  4. openwrt固件编译过程

    主Makefile分析 注:1)make -n可打印makefile执行的命令,而不执行. 2)可以在规则的命令中增加echo跟踪执行进度. 顶层目录的Makefile是openert的总Makefi ...

  5. struts-config.xml 文件:

    struts-config.xml配置文件是一个在Web客户端组件的视图和模型之间的联系,但你的项目的99.99就不会碰这些设置%.基本的配置文件包含以下主要内容: SN Interceptor &a ...

  6. C# 6新特性简单总结

    最近在看<C#高级编程 C# 6&.NET Core 1.0>,会做一些读书笔记,也算对知识的总结与沉淀了. 1.静态的using声明 静态的using声明允许调用静态方法时不使用 ...

  7. MySQL的limit子句

    1.理解: limit用来取结果集中的固定几条记录 2.参数: limit offset,pagesize offset:偏移量,为0时,可以省略 pagesize:每页显示的行数,通常是固定的 0表 ...

  8. eclipse + pydev 创建django项目

    前提条件机器装好python,并装好django插件.(http://blog.csdn.net/lilongjiu/article/details/51405340) 1. 下载eclise Ver ...

  9. 微信公众平台开发:进阶篇(Web App开发入门)

    本文转载至:http://blog.csdn.net/yual365/article/details/16820805  WebApp与Native App有何区别呢? Native App: 1.开 ...

  10. JSON Extractor/jp@gc - JSON Path Extractor 举例2

    测试描述 使用json返回结果做校验 测试步骤 1.配置http请求 2.根据结果树返回的json,取值 { "status_code":200, "message&qu ...