`
y8820960
  • 浏览: 115824 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

(三)jQuery总结:ajax

 
阅读更多

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
alert(”The last 25 entries in the feed have been loaded”);
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(”Data Loaded: ” + data);
});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
alert(”JSON Data: ” + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
$.getScript(”test.js”, function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”<li>Request Complete.</li>”);
});
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxError(function(request, settings){
$(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
});

ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxSend(function(evt, request, settings){
$(this).append(”<li<Starting request at ” + settings.url
+ “</li<”);
});

ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$(”#loading”).ajaxStart(function(){
$(this).show();
});

ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时,隐藏loading信息。
$(”#loading”).ajaxStop(function(){
$(this).hide();
});

ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时,显示信息。
$(”#msg”).ajaxSuccess(function(evt, request, settings){
$(this).append(”<li>Successful Request!</li>”);
});

jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
});
$.ajax({ data: myData });

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $(”form”).serialize();
$(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();

serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
从form中取得一组值,显示出来
function showValues() {
var fields = $(”:input”).serializeArray();
alert(fields);
$(”#results”).empty();
jQuery.each(fields, function(i, field){
$(”#results”).append(field.value + ” “);
});
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();

分享到:
评论

相关推荐

    AJAX学习总结(八)---Jquery实例:动态股票价格

    在本篇“AJAX学习总结(八)---Jquery实例:动态股票价格”中,我们将深入探讨如何使用jQuery库来实现AJAX技术,以便实时更新网页上的股票价格信息。AJAX,即异步JavaScript和XML,是一种在无需刷新整个页面的情况下...

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    jQuery 是一个广泛使用的JavaScript库,由John Resig于2006年创建,它极大地简化了JavaScript编程,尤其是处理DOM操作、事件处理、动画效果和Ajax交互。jQuery 的设计目标是“write less, do more”,它通过提供简洁...

    jQuery:ajax

    ### jQuery的Ajax功能详解 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于构建动态网页应用,使得页面无需重新加载即可更新部分数据。jQuery,作为一款优秀的JavaScript库,提供了强大的...

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解*...总结,jQuery和Ajax的结合大大提高了Web应用的用户体验,使得网页能够在不刷新的情况下与服务器进行通信。通过学习和实践这些基本的Ajax功能,开发者能够构建出更加动态和响应式的网页应用。

    一个JQuery +Ajax 封闭的一个GridView控件DataGrid

    总结,jQuery + Ajax实现的DataGrid控件能够提供高效、交互性强的数据展示方案,通过优化的前端技术,实现了无刷新的用户体验,提升了Web应用的性能和可用性。开发者可以根据具体需求对这个基础框架进行扩展和定制,...

    LYF:Ajax_jquery教程

    【Ajax与jQuery简介】 Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。这种方式可以让网页...

    AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能

    在本篇博客“AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能”中,作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能,这是一种常见的前端交互设计,广泛应用于搜索框输入时提供...

    JQUERY插件--ajax搜索

    ### 三、jQuery Autocomplete 插件 `jquery.autocomplete-1.4.2.js` 文件是一个 jQuery 的自动补全插件,它为输入框提供了搜索建议功能,实现了基于 Ajax 的实时搜索。以下是如何使用该插件的基本步骤: 1. **引入...

    利用Ajax+Jquery实现异步进度条效果

    总结来说,"利用Ajax+Jquery实现异步进度条效果"是一个综合性的技术实践,涵盖了C#、.NET框架、Ajax和Jquery等多个技术领域,旨在通过实时反馈提高用户交互体验。理解并掌握这些技术,对于开发高效、用户友好的Web...

    Jquery ajax json 总结

    总结来说,JQuery AJAX 提供了与服务器异步交互的能力,而 JSON 则是高效的数据交换格式。两者结合使用,可以实现高效的前后端数据通信,提升用户体验,减少不必要的页面刷新。在实际项目中,了解并熟练掌握这两项...

    jquery总结学习资料JQuery总结

    **jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...

    ajax使用jquery json实现的省市县三级联动经验总结

    ### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    **三、jQuery的简写Ajax方法** 为了简化开发,jQuery还提供了几个预定义的Ajax方法,如`.get()`, `.post()`, `.getJSON()`等。例如: ```javascript $.get('serverScript.php', {param1: 'value1'}, function(data...

    Jquery Ajax简易计算器

    **jQuery AJAX简易计算器** 在Web开发中,动态交互是提升用户体验的重要手段,而jQuery的AJAX功能正是实现这种交互的核心技术。本项目“jQuery AJAX简易计算器”旨在展示如何利用jQuery库与服务器端进行异步数据...

    jQuery中的ajax学习

    在JavaScript的世界里,...总结起来,jQuery的Ajax功能通过提供简洁的API和强大的配置选项,极大地简化了Web应用中的异步数据交换。无论是在小型项目还是大型应用中,熟练掌握jQuery的Ajax使用都是提升开发效率的关键。

    Jquery Ajax实现简易计算器

    总结来说,利用Jquery的Ajax功能,我们可以创建一个无需页面刷新的简易计算器。用户在前端输入数值和运算符,通过Ajax请求发送到后端进行计算,然后将结果返回到前端显示。这种方法提高了用户体验,使得计算器的交互...

    jquery-ajax实例

    总结一下,这个"jQuery-AJAX实例"涵盖了以下几个关键知识点: 1. jQuery的$.ajax()方法,用于发起Ajax请求。 2. JSON数据格式的使用,包括Java Bean到JSON的转化。 3. jQuery如何解析服务器返回的JSON数据,并更新...

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

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

    jQuery项目:分页.zip

    总结,"jQuery项目:分页.zip"是一个关于如何使用jQuery创建和应用分页插件的实例。通过学习这个项目,开发者可以掌握如何利用jQuery进行DOM操作、事件处理以及数据加载,同时了解如何封装可复用的组件,提升开发...

Global site tag (gtag.js) - Google Analytics