jQuery简单入门(五)

5.Ajax应用

在jQuery中$ajax()方法属于最底层的方法,第二层是load()、$.get()、$.post(),第三层是$.getScript()和 $.getJSON();下面根据使用频率来介绍



1.load()方法

load()方法能载入远程HTML代码并插入DOM中(实际项目中,该方法使用频率高???!!!)

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

  表现形式:

  A. 载入HTML文档

  $(“tag”).load(“load.html”);//把load.html加载到tag标签

  B. 筛选载入的HTML文档

  $(“tag”).load(“load.html .class”);//把load.html文档中类样式为class的内容加载到tag标签

  C. 传递方式

  $(function() {

  $(“tag”).load(“test.php”, function() {

   Alert(“无参数传递,则是GET方式”);

  }).load(“test.php”, {name : “test”, age : “22”}, function() {

   Alert(“有参数传递,则是POST方式”);

  });

  });

  D. 回调参数

  $(“tag”).load(“test.php”, {name : “test”, age : “22”}, function(responseText, textStatus, XMLHttpRequest) {

     // responseText     请求返回的内容

   //textStatus        请求状态

   //XMLHttpRequest  XHR对象

  });



2.$.get()方法和$.post()方法

Get请求限定数据大小为2k,而post原则上是不限定大小

Get数据放入地址栏中,post放入到报文消息体内

  1. Get()

  $.get(url [,data] [,callback] [,type])

  Aa. 对返回的HTML数据处理

  $(function() {

  $(“#submit”).click(function() {

   $.get(“test.php”, {

   Name : $(“#name”).val(),

   Content : $(“#content”).val()

  }, function(data, textStatus) {

     $(“tag”).html(data);

  })

  });

  });



  Ab. XML文档

  $(function() {

  $(“#submit”).click(function() {

  $.get(“test.php”, {

     Name : $(“#name”).val(),

   Content : $(“#content”).val()

  }, function(data, textStatus) {

   Var name = $(data).find(“comment”).attr(“name”);

   Var content = $(data).find(“comment content”).text();

    Var html = “<div class=’comment’><h6>”+

          name+“</h6><p class=’para’>” +

          content+”</p></div>”;

  $(“tag”).html(html);

   })

   });

  });



Ac. JSON文件

$(function() {

$(“#submit”).click(function() {

$.get(“test.php”, {

Name : $(“#name”).val(),

Content : $(“#content”).val()

}, function(data, textStatus) {

Var name = data.name;

Var content = data.content;

Var html = “<div class=’comment’><h6>”+

        name+“</h6><p class=’para’>” +

        content+”</p></div>”;

$(“tag”).html(html);

})

});

});

2.Post()[参考get()]



3.$.getScript()方法和getJson()方法

  A.$.getScript(js [,callback])//动态加载js文件

    Aa.动态加载js文件

    $.getScript(“test.js”);

    Ab.使用回调

    $getScript(“jquery.color.js”, function() {

     Alert(“使用回调”);

     })

  B.getJSON(json [,callback])//动态加载json文件,使用方法类似getScript()



4.$.ajax()方法

  示例代码:

  $.ajax({

   Type : GET,

  Url  : “test.php”,

   dataType : “json”,

   Success : function (data) {

  Alert(“回调成功”);

  }

  });



5.jQuery中的Ajax全局事件

监控一个异步请求的过程



ajaxStart()

ajaxStop()



(完)

时间: 2024-10-07 06:55:39

jQuery简单入门(五)的相关文章

jQuery简单入门(二)

2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQuery操作DOM aa.操作节点 1.查找节点 1.1.查找元素节点: $(“input”).val();//获取input元素的数值 $(“form input:eq(1)”).val();//获取form元素的第2个input子元素的数值 1.2.查找属性节点: $(“input”).attr(“

jQuery简单入门(三)

3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全部加载完成,才会为DOM元素添加事件行为;而jquery只要DOM元素加载完成,就立刻绑定事件 2.表现形式: $(function() { //你的实现逻辑 }); Ab. 事件绑定 事件绑定方法bind(eventType [, data],  function() {...}) 表现形式: $

JQuery 简单入门

1.选择器 1.Jquery选择器的各种用法 $(this) 当前元素 $("p") 所有<p>元素 $("input") 所有input元素 $(".intro") 所有 class=“intro” 的元素 $("p.intro") 所有 class="intro" 的<p>元素 $("#intro") id="intro" 的第一个元素 $

jQuery简单入门(四)

4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method=”POST” > <input type=”text” /><p/>” <input type=”submit” /> </form> Aa. 单行文本框应用 示例: 1.需求:当单行文本框获取和失去焦点改变样式 2.示例代码 $(function()

jquery简单入门(一)

相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://index.baidu.com/?tpl=demand&word=javascript) 如有纰漏,请各位看客赐教 内容目录:(本文采用连载模式组织) 1.jquery选择器 2.Dom操作 3.事件和动画 4.表单.表格应用 5.Ajax应用 1.jquery选择器(便捷.快速选定DOM,并对被选中的

JQuery简单入门

JQuery的遍历操作 1.  被遍历的对象(是一个集合) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用对象访问方式遍历</title> <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></scri

HTML5简单入门系列(五)

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

【转】requirejs简单入门

博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"&

[WebGL入门]五,矩阵的基础知识

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 不是让你到店前面排队 lufy:你一定奇怪,为什么叫这个题目,因为日语中的矩阵叫做"行列",所以作者就给读者们开了个玩笑,我就这么直接翻译了,大家知道什么意思就行了. 在3D渲染的世界里,会很频繁的用到矩阵. 这里所说的矩阵,是数学里的矩阵.英语中叫做Matrix. 矩阵虽然听起来好