Jquery.Ajax常用使用方法,上手教程

ajax直冲上手笔记 (包含axios)-- 后端必备(前端建议完整版)

ajax 上手

ajax简介

  1. ajax不是一种新的编译语言,而是一种用于创建更好、更快以及交互性更强的Web技术
  2. 增强B/S的体验性(可以不刷新整个页面,而只刷新局部)


    了解: B/S是未来的主流。这几年来爆发性的增长(后期可能只需要一个浏览器就可以干很多的事情)
  3. ajax的核心是XMLHttpRequest对象,XHR是向服务器发送请求服务器相应的接口。可以从异步获取数据
jquery.get (……)

参数:
URL(待载入的URL参数)(必填)、
data(待发送的参数)、
success(载入成功时返回的参数)(内含了解参数:①data:返回的数据 ; ②status: 返回的状态)、
dataType: (返回内容的指定格式)

jquery.post(……)

参数:
URL(待载入的URL参数)(必填)、
data(待发送的参数)、
success(载入成功时返回的参数)(内含了解参数:①data:返回的数据 ; ②status: 返回的状态)、
dataType: (返回内容的指定格式)

jquery.ajax(……)

url(必填)、data、success基本上会用到。如还有需要,可以百度参考一下,后端基本上用的比较少。

使用方法

  1. 引入jquery。(可以去官网下载,然后用js外链的方式引入)
    官网网址:https://jquery.com/
  2. 展示 jquery.Ajax 的使用
$(function(){
	$("btn").click( function () {
			$.post("${pageContext.request.contextPath}/ajax/a1" , function () {
				console.log (data)
			})
		} )
	})

axios 上手

简介

axios是一个开源的,可以用在异步浏览器的NodeJs框架,主要实现异步通讯
(使用要求:浏览器必须支持es6

为什么不用jquery呢?

vue实例具有一个完整的生命周期,也就是开始创建、初始化数据、编译模块、挂在DOM、渲染、更新、卸载等一系列过程,我们称之为 vue 的生命周期。
通俗移动的讲,就是 vue 实例从创建到销毁的一个过程,这就是生命周期

使用

  1. 引入 axios

    引入js文件
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    或者
    可以利用node去下载(npm install axios) ⇒ 建议

  2. 通讯

    官方建议:一般都要放在==mounted( ) ==钩子函数上挂载。
    如果不知道什么钩子函数,请到主页中 vue 笔记详细看一下钩子函数 这个部分。


    axios.get("URL地址").then(response=>(可以进行数据绑定等操作))
    要求:请求返回的参数必须和字符串一样

本文章看完,完全可以实现上手通讯,如想细究,还是要去官网一探究竟!

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值