【整理】jQuery知识点4

原创 2016年06月01日 15:05:45
★★★ ============================================================= jQuery - AJAX
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。


jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。


语法:
$(selector).load(URL,data,callback);


下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt");
  });
});


也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("#div1").load("demo_test.txt #p1");


可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:


★★★ ============================================================= jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。


HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。


jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);


必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});


jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
$("button").click(function(){
  $.post("demo_test_post.html",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});


★★★ ============================================================= jQuery - $.ajax()
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })


下面的表格中列出了可能的名称/值:
名称 值/描述
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 对象的函数。


★★★ ============================================================= ajax demo
//$(document).ready(function () {
//    $("button").click(function () {
//        $("#div1").load("../OtherFiles/ajaxtest1.txt #p1", function (responseTxt, statusTxt, xhr) {
//            if (statusTxt == "success")
//                alert("External content loaded successfully!");
//            if (statusTxt == "error")
//                alert("Error: " + xhr.status + ": " + xhr.statusText);
//        });
//    });
//});
//$(document).ready(function () {
//    $("button").click(function () {
//        $.get("Home/AjaxGet", function (data, status) {
//            alert("Data: " + data + "\nStatus: " + status);
//        });
//    });
//});
//$(document).ready(function () {
//    $("button").click(function () {
//        $.post(
//            "Home/AjaxPost",
//            {
//                name: "cxc",
//                grade:88
//            },
//            function (data, status) {
//                alert("Data: " + data + "\nStatus: " + status);
//            });
//    });
//});
//$(document).ready(function () {
//    $("button").click(function () {
//        $.ajax({
//            url: "AjaxPost",
//            type:"get",
//            data: {name: "cxc",grade:88},
//            success: function (data, status) {
//            alert("Data: " + data + "\nStatus: " + status);
//        }});
//    });
//});
//$(document).ready(function () {
//    $("button").click(function () {
//        $.getJSON("Home/AjaxJson", { name: "cxc", grade: 88 }, function (data) {
//                alert("Data: " + data.grade);
//            }
//        );
//    });
//});
版权声明:本文为博主原创文章,未经博主允许不得转载。

UML知识点整理

UML——1 1.       2-8原则用例 2.        瀑布模型质量文档、管理文档、设计文档(类比为水) 3.        模型:UML 4.       RUP的软件开发周期:...
  • Wentasy
  • Wentasy
  • 2013年01月10日 16:28
  • 2781

html5和css3新增的常用知识点

H5新增的离线应用: (1)当要开发基于h5的离线应用时,先确定服务器是否支持对manifest文件的解析。 (2)若不支持,需要用户手动设置,在服务器mime.types文件中添加; (3)为...
  • lululul123
  • lululul123
  • 2017年03月31日 20:45
  • 365

【JQuery】知识点总结(上)

背景:
  • u013043341
  • u013043341
  • 2016年01月10日 21:33
  • 847

jQuery中一些必须要知道的知识点总结--20个(上)

1. jQuery 库中的 $() 是什么?(答案如下) $() 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。一旦你适应了,你会爱上它的简洁。$() 函数...
  • guo13313
  • guo13313
  • 2017年03月27日 00:03
  • 1463

python一些基本知识点之列表(二)

Python的列表对象是这个语言提供的最通用的序列。 列表是一个任意类型d
  • peng825223208
  • peng825223208
  • 2014年06月04日 09:18
  • 776

ElasticSearch知识点整理

1:es介绍          Elasticsearch是一个基于Lucene的实时的分布式搜索和分析引擎。设计用于云计算中,          能够达到实时搜索,稳定,可靠,快速,安装使用方便...
  • tanga842428
  • tanga842428
  • 2016年09月04日 21:22
  • 359

MySQL数据库知识整理归纳

数据库创建需要考虑的内容
  • cz28274815
  • cz28274815
  • 2014年09月04日 22:21
  • 707

数据结构知识点总结整理

0、常考基础必知必会 A. 排序:排序有几种,各种排序的比较,哪些排序是稳定的,快排的算法; B. 查找:哈希查找、二叉树查找、折半查找的对比,哈希映射和哈希表的区别? C. 链表和数组的区别,...
  • b06340130
  • b06340130
  • 2013年04月23日 09:36
  • 3174

spring基础知识整理

spring学习的总结1、什么是Spring的Ioc容器spring容器就是常说的Ioc容器,即控制翻转,作为程序员,当我们去实例化一个 对象时,通常需要手动new创建一个对象,并且去跟踪该对象的生命...
  • DFL_always
  • DFL_always
  • 2016年12月06日 19:21
  • 1002

Mybatis复习整理

Mybatis 知识点整理,有些问题不是不会,也不是不懂,只是没有见过!
  • fangdengfu123
  • fangdengfu123
  • 2017年03月16日 15:34
  • 324
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】jQuery知识点4
举报原因:
原因补充:

(最多只允许输入30个字)