jQuery异步Ajax总结

ajax()方法通过HTTP请求加载远程数据。该方法是jQuery底层AJAX实现。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
一、 ajax的使用

  1. 语法
    jQuery.ajax([settings])。
    settings代表的是可选,用于配置Ajax请求的键值对集合。
  2. 参数
    jQuery的ajax提交方法内配有很多参数,其中有一些常用选项:
    (1) type:代表提交的类型。在使用时需要通过什么方式进行提交可以通过设置type属性值为GET或是POST提交,默认情况下是GET提交。
    (2) url:发送请求的地址。当数据获取完毕之后需要提交数据到控制器,通过该属性便可以设置提交的地址。
    (3) async:设置是否异步。默认值为(true)异步,如果需要使用同步,便设置为false。设置同步将会锁住浏览器,用户需要进行其他操作必须等待请求完成之后才能执行。
    (4) data:是一个对象,连同请求一起发送到服务器的数据。一般在页面获取数据提交的时候使用,将数据通过该参数连同请求一并传递。
    (5) datatype:预期服务器返回的数据类型,如果不指定jQuery将根据http包MIME信息智能判断。一般我们设置的返回类型是json格式。
    (6) success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串。
    (7) error:是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象。
  3. 举例
    熟悉完jQuery的ajax()方法,便可以运用到实际。
    通过该方法我们可以获取到服务器上的数据:
    在这里插入图片描述
    get与post两个方法各有优点,我们可以灵活运用。get传输快,但会暴露信息到链接上,不过我们获取数据信息的时候本来就会暴露在页面上,所以我们一般在获取数据的时候使用get;提交数据的时候需要保证信息安全,所以使用post。
    我们在使用ajax()方法提交数据的时候更多的会使用异步提交,但是async参数值默认状态下为异步,所以我们在写异步的时候就可以省略async。
    在success参数内设置方法,通过参数data将数据传递过来,然后使用data对象点出需要使用的数据参数。
    二、 表单序列化
    表单序列化的使用一般在使用Ajax提交方式从页面获取数据提交到服务器时使用。
    序列化的方法有两个:
    (1) serialize()
    通过该方法可以序列化表单内容为字符串。
    (2) serializeArray()
    通过该方法序列化表单元素返回JSON数据结构数据。返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个键值对——name参数和value参数。
    jQuery的表单序列化的写法与原生js的表单序列化写法其实是一样的,只不过jQuery简化了某些操作,编写更简易。
    1.自定义变量获取页面表单数据
    在这里插入图片描述
    2.判断数据是否完整
    在这里插入图片描述
    3.拼接json格式字符串,并通过表单序列化方法序列化表单
    在这里插入图片描述
    4.通过ajax表单提交的方式将数据提交给服务器,并通过服务器处理返回提示,同时通过success接收成功信息,给出反应,相对应设置error接收失败信息作出反应。这是将页面数据提交,所以不能使用get,是使用post。
    在这里插入图片描述
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值