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

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>"); });

时间: 2024-10-22 13:06:20

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

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

jQuery:自学笔记(2)--jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font-size','18px') ID选择器 //使用id选择器改变背景颜色 $('#div1').css('background','red'); 说明:ID选择器中,ID前面必须加一个#,以表明这是一个jQuery的ID选择器. 类选择器 //使用类选择器设置字体样式 $('.spanclass')

jQuery自学笔记(三):jQuery动画效果

jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒,可选的 callback 参数是隐藏或显示完成后所执行的函数名称. 一个关于调用callback函数的实例: $("

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

获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) - 设置或返回表单字段的值 例子: $("#btn1").click(function(){   $("#test1").text("Hello world!"); }); $("#btn2").click(function()

jQuery自学笔记(五):关于jQuery的遍历

向上遍历 DOM 树 parent()  //返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历. parents()    //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>); 也可以使用可选参数来过滤对祖先元素的搜索,如: $("span").parents("ul"); parentsUntil()   // 返回介于两个给定元素之间的所有祖先元素,如:  $("span").paren

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

jQuery整理笔记八----jQuery的Ajax

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的. jQuery封装了Ajax的交互过程,用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接.发送请求.发送方式.接收方式等细节,利用jQuery定义 的几个简单方法,即可轻松实现客户端与服务端异步通信的问题,从而帮助开发人员从繁琐的技术细节中解脱出来,专心于业务层开发工作. 最初始的JavaScrip

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery练习笔记

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #pannel { position:relative; width:100px; height:100px; b

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#