`

jQuery AJAX 函数学习

阅读更多
jQuery AJAX 函数
jQuery 提供了供 AJAX 开发的丰富函数(方法)库。
通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中!

jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:
$(selector).load(url,data,callback)

请使用选择器来定义要改变的 HTML 元素,使用 url 参数来指定您的数据的 web 地址。
例:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $('#myDiv').load('/jquery/test1.txt');
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

</body>
</html>

只有当您希望向服务器发送数据,才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时,您才需要使用 callback 参数。


Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
例:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

</body>
</html>



jQuery AJAX 请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

更多Ajax函数参考:jQuery 参考手册 - Ajax http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
分享到:
评论

相关推荐

    Jquery Ajax分页(有实例)

    **jQuery AJAX分页技术详解** ...对于初学者,这个实例是学习和理解AJAX分页的宝贵资源,而对于经验丰富的开发者,它则提供了灵感和参考。在实践中不断探索和优化,将能创造出更多适应不同场景的分页解决方案。

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    在深入探讨Jquery中的Ajax函数之前,我们先简要了解Ajax(Asynchronous JavaScript and XML)的概念。Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这使得Web应用程序可以更加流畅地运行,...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    jQuery实现的Ajax函数(已测试)——ASP

    **jQuery实现的Ajax函数在ASP中的应用** Ajax(异步JavaScript和XML)技术允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,显著提升了用户体验。jQuery库简化了JavaScript的Ajax操作,...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    - jQuery提供了$.ajax()函数,使得发起AJAX请求变得简单。该函数允许我们指定URL、请求类型(GET或POST)、数据、回调函数等参数,实现异步数据通信。 - AJAX的核心优势在于其非阻塞特性,能提高用户体验,因为...

    html静态页JQuery ajax示例demo 源码

    `$.ajax()`是jQuery提供的核心AJAX函数,它允许我们配置各种选项来定制请求,如URL、请求类型(GET或POST)、数据类型(JSON、XML、HTML等)以及请求成功或失败的回调函数。 在C# ASP.NET环境下,我们可以创建一个...

    jqueryajax jquery ajax

    3. **简化的AJAX函数**:jQuery提供了更加简洁的接口,如`$.get()`、`$.post()`、`$.getJSON()`等。例如,用`$.get()`获取数据: ```javascript $.get('example.php', {key: 'value'}, function(response) { // ...

    Jquery ajax方式读取txt文件、Jquery分页.

    在jQuery中,`$.ajax()`函数是实现这一目标的核心。要读取TXT文件,我们可以这样做: ```javascript $.ajax({ type: 'GET', // 使用GET请求方式 url: 'path_to_your_file.txt', // 替换为你的TXT文件路径 ...

    jquery ajax源代码

    在提供的代码片段中,可以看到两个函数:`doload1` 和 `doload2`,它们都使用了 jQuery 的 AJAX 方法来发送请求并处理返回的数据。 ##### 2.1 doload1 函数 ```javascript function doload1() { $.ajax({ url: ...

    jquery ajax函数调用xml文件select表单全国城市

    首先,我们需要了解jQuery中的$.ajax()函数。这是一个核心的AJAX方法,用于异步向服务器请求数据。基本语法如下: ```javascript $.ajax({ url: 'your_xml_file.xml', // XML文件路径 type: 'GET', // 请求类型 ...

    Jquery Ajax简易计算器

    jQuery封装了AJAX函数,使得开发者可以更轻松地使用AJAX。 **AJAX工作原理** 1. **用户触发事件**:用户在计算器界面上输入数字或点击运算符按钮。 2. **创建AJAX请求**:jQuery的`.ajax()`方法用于创建AJAX请求。...

    JqueryAjax简单实例

    在这个"JqueryAjax简单实例"中,我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先,我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....

    Jquery ajax json 总结

    在客户端,接收到 JSON 数据后,JQuery AJAX 的回调函数可以解析并处理这些数据。对于 JSON 对象,可以使用 `eval()` 或 `JSON.parse()`(推荐)将其转换为 JavaScript 对象,然后通过点号或方括号语法访问其属性。...

    传智播客 jQuery ajax 课件

    - `$.ajax()`: 这是jQuery中最核心的AJAX函数,用于发起一个完整的AJAX请求。参数包括URL、类型(GET或POST)、数据、回调函数等。 - `$.get()`: 用于发起GET请求,简化了`$.ajax()`的使用,只需提供URL和回调函数...

    使用jQuery ajax提交表单代码

    首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理...

    jquery AJAX 回调函数取JSON成功代码

    首先,让我们深入了解jQuery的$.ajax()函数。这是一个核心的jQuery方法,用于发起Ajax请求。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。当我们在...

    jquery ajax 与后台验证

    在网页开发中,jQuery AJAX 是一种非常重要的技术,它允许前端和后端进行异步通信,无需刷新整个页面。无刷验证(又称实时验证或AJAX验证)是这种技术的一个典型应用,它提高了用户体验,因为在用户输入数据时,可以...

    Jquery Ajax 前后台数据传输

    **jQuery AJAX 前后台数据传输详解** 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库为开发者提供了简单易用的...

    jqueryAjax_无刷新调用另一页实例

    "jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...

    javascript+jquery+ajax相关学习资料PPT

    2. JQueryAjax教程讲解.ppt:这可能是关于使用jQuery进行AJAX请求的详细讲解,包括$.ajax()函数,$.get()和$.post()方法的使用,以及如何处理回调函数。 3. Jquery(很好的PPT教程-技术较为全面-分享给大家).ppt:这...

Global site tag (gtag.js) - Google Analytics