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放入到报文消息体内
- 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()
(完)
jQuery简单入门(五)的更多相关文章
- jQuery简单入门
jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...
- jQuery简单入门(三)
3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...
- jQuery简单入门(二)
2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...
- jQuery简单入门(四)
4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...
- jquery简单入门(一)
相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...
- jquery简单入门1
前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...
- jquery 简单入门
例:GridView
- HTML5简单入门系列(五)
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
随机推荐
- cookies
Cookie[] cookies=request.getCookies(); for(Cookie c:cookies) out.println(c.getValue()+" ") ...
- 关于JAVA日志
虽然工作有一年了,做了好几个项目,但是对于日志这一块还只局限于拷贝配置文件,对于实现细节和灵活使用都还不会,主要的原因还是以前一直没有重视,在经历了好几个项目以后越发的觉得日志的重要性了.所以这几天都 ...
- struts 用拦截器进行用户权限隔离,未登录用户跳到登录界面 *** 最爱那水货
一般,我们的web应用都是只有在用户登录之后才允许操作的,也就是说我们不允许非登录认证的用户直接访问某些页面或功能菜单项.对于个别页面来说,可能不需要进行拦截,此时,如果项目采用struts view ...
- InfluxDB学习之InfluxDB连续查询(Continuous Queries)
在上一篇:InfluxDB学习之InfluxDB数据保留策略(Retention Policies) 中,我们介绍了 InfluxDB的数据保留策略,数据超过保存策略里指定的时间之后,就会被删除. 但 ...
- @media自适应宽度
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- toastr 自定义提示
在线实例 实例演示 使用方法 <button type="button" class="btn btn-primary" id="showtoa ...
- ScrollReveal.js – 帮助你实现超炫的元素运动效果
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...
- 《Javascript高级程序设计》:创建对象
工厂模式 function createPerson(name,age, job){ var o = new Object(); o.name = name; o.age = age; o.job = ...
- ICSharpCode.SharpZipLib简单使用
胡乱做了个小例子,记录下来,以便后面复习. using System; using System.Collections.Generic; using System.Linq; using Syste ...
- nginx反向代理配置及优化
nginx反向代理配置及优化前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反 ...