利用jQuery实现Ajax的封装的步骤分享

本篇文章给大家分享的内容是利用jQuery实现Ajax的封装的步骤分享,有着一定的参考价值,有需要的朋友可以参考一下

load方法

load(url,[data],[callback])。data为提交的数据,callback为回调函数,回调函数可以传三个参数,response stutas xhr,第一个参数为从服务器端返回的内容,第二个参数为响应状态success或error,第三个参数为底层js中xmlhttprequest对象

$(‘#box’).load(url)。可直接将从目标地址获取的内容加载填充到当前页面的某处。

全局方法get()

$.get(url,[data],[callback],type) type表示返回内容的格式,若不设置返回原本格式,强行转化可能会获取失败

全局方法post()

$.post(url,[data],[callback])。

全局方法getJSON()

$.getJSON()(url,[data],[callback])。

用于特定情况下加载json文件

全局方法getSCRIPT()

$.getSCRIPT()(url,[data],[callback])。

用于特定情况下加载js文件。一般不用。

全局方法ajax()

只ajax()方法只传递一个参数,即一个包含若干键值对的对象。

最常用的格式:

$.ajax({  url:, //请求的地址  type:, //请求的方式'GET'或'POST'  data:{        },  //提交的信息  dataType: 'json',//设置返回内容的数据类型  timeout:  ,//设置超时,请求超过了这个时间值就会结束请求  global: ,//设置是否触发全局事件,true或false  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数,xhr对象,错误信息,错误类型       }  success:function(response,stutas,xhr){//响应成功后执行的回调函数     console.log(response);      },  beforeSend : function(){//请求开始之前触发该事件},complete : function(){//请求结束之后触发该事件}})

登录后复制

表单序列化

常规数据提交方式:假设提交数据为表单中的用户名和邮箱地址

data:{ user:document.getElementById(‘user’), emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行  }

登录后复制

表单序列化:
data:$(‘form’).serialize(),//序列化后得到的是字符串形式的数据键值对,并且对url进行了编码。函数serialize()的作用对象可以是整个表单也可以是一个表单元素,但只能是jQuery对象。

param()方法
$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。
对于第一种直接传递一个对象的提交方式,可以用此函数对整个对象进行序列化。

data:$ .param({     user:document.getElementById('user'),     emall:document.getElementById('emall')    } )

登录后复制

serializeArray()方法
serializeArray方法是将一个表单当中的各个字段序列化成一个json格式的数组。

加载请求

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件,请求结束时会触发结束事件。

登录后复制

$(document).ajaxStart(function(){     //请求开始时触发的行为        }).ajaxStop(function(){     //请求结束时触发的行为})

登录后复制

jQuery xhr对象

jqXHR对象就是$.ajax()方法返回的对象,它是jsXHR对象的一个超集。

var jqXHR = $.ajax(            url:, //请求的地址                  type:, //请求的方式'GET'或'POST'      data:{                      },  //提交的信息             );

登录后复制

jqXHR对象提供了许多新的属性与方法,支持以连缀的方式去写。可以多次执行同一个回调函数,而不会被覆盖。

以上就是利用jQuery实现Ajax的封装的步骤分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2774228.html

(0)
上一篇 2025年3月8日 14:05:08
下一篇 2025年3月8日 14:05:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Angular JQuery生成简单快递管理界面的代码分享

    本篇文章给大家分享的内容是Angular JQuery生成简单快递管理界面的代码分享,有着一定的参考价值,有需要的朋友可以参考一下 话不多说,直接上代码: nbsp;html>–按状态查询–已发货未发货id  商品名用户名手机号价…

    编程技术 2025年3月8日
    200
  • jquery实现表格动态复选框的代码分享

    本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享,有着一定的参考价值,有需要的朋友可以参考一下 效果如图 nbsp;html>                                             …

    编程技术 2025年3月8日
    200
  • 在jQuery里如何使用复合选择器

    这次给大家带来在jQuery里如何使用复合选择器,在jQuery里使用复合选择器的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号…

    编程技术 2025年3月8日
    200
  • ajax动态赋值数据图

    这次给大家带来ajax动态赋值数据图,ajax动态赋值数据图的注意事项有哪些,下面就是实战案例,一起来看一下。 本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 (1)jsp页面 [html] view plain copy 登…

    编程技术 2025年3月8日
    200
  • 自定义ajax的跨域组件封装

    这次给大家带来自定义ajax的跨域组件封装,使用自定义ajax跨域组件封装的注意事项有哪些,下面就是实战案例,一起来看一下。 Class.create()分析 仿prototype创建类继承 var Class = { create: fu…

    编程技术 2025年3月8日
    200
  • $.ajax()方法怎样从服务器里获取json数据

    这次给大家带来$.ajax()方法怎样从服务器里获取json数据,$.ajax()方法从服务器里获取json数据的注意事项有哪些,下面就是实战案例,一起来看一下。 一.什么是json json是一种取代xml的数据结构,和xml相比,它更小…

    编程技术 2025年3月8日
    200
  • Vue怎么进行ajax请求公共方法

    这次给大家带来Vue怎么进行ajax请求公共方法,Vue进行ajax请求公共方法的注意事项有哪些,下面就是实战案例,一起来看一下。 为了减少代码的冗余,小编给大家推荐一篇介绍了决定抽离出请求ajax的公共方法的文章,供大家参考。 我使用了E…

    编程技术 2025年3月8日
    200
  • ajax实现简单实时验证功能

    这次给大家带来ajax应该怎样实现实时验证,ajax实现实时验证的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是ajax Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript …

    编程技术 2025年3月8日
    200
  • JS如何实现Ajax的请求函数

    这次给大家带来JS如何实现Ajax的请求函数,JS实现Ajax请求函数的注意事项有哪些,下面就是实战案例,一起来看一下。 一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单。 但是…

    编程技术 2025年3月8日
    200
  • Ajax怎么实现异步调用服务端

    这次给大家带来Ajax怎么实现异步调用服务端,Ajax实现异步调用服务端的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax的使用方法,在js中调用cs文件中的一直方式,使用步骤如下 (1)下载ajax.dll,并添加项目的引用。 …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论