vue、jQuery的Ajax写法

VUE

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

axios（不支持发送跨域的请求）

axios([options])

send() {axios({method: 'get', //只能用geturl: 'user1.json',}).then(res => { //参数可以重复console.log(res.data);}).catch(res => {console.log(res);})},

axios.get(url[,options]);
传参方式：
1.通过url传参
2.通过params选项传参

Getsend() {axios.get('server.php', {params: {name: 'tom',age: '24',}}).then(re => {console.log(re.data);}).catch(re => {console.log("失败");})}

axios.post(url,data,[options]);

var vm = new Vue({el: '#c',methods: {Postsend() {axios.post('server.php', 'name=tom&age=20')//方法1,数据是死的.then(res => {console.log(res.data);}).catch(res => {console.log("错误");})}}});

Postsend() {
axios.post('server.php', this.user, { //需要this.usertransformRequest: [function(data, headers) {let params = '';for (let index in data) {params += index + '=' + data[index] + '&';}return params;}]}).then(resp => {console.log(resp.data);
}).catch(err => {console.log('请求失败：' + err.status + ',' + err.statusText);});
}

axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
传参方式：
1.自己拼接为键值对
2.使用transformRequest，在请求发送前将请求数据进行转换
3.如果使用模块化开发，可以使用qs模块进行转换

vue-resource（支持发送跨域的请求）

使用this.$http发送请求

this.$http.get(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])

//360浏览器
sendJ(){this.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:'a'},}).then(res=>{console.log(res.data.s)})
},

sendJB(){this.$http.jsonp('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1465,21106,29074,29522,29518,29721,29568,29220',{params:{wd:'a'},jsonp:'cb',}).then(res=>{console.log(res.data);})
}

jQuery

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

HTTP GET 请求从服务器上请求数据。
可选的 callback 参数是请求成功后所执行的函数名。

$.get(URL,callback);

HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);

vue、jQuery的Ajax写法相关推荐

js原生的ajax写法
一直都在用jquery的ajax写法,却忘记原生的ajax写法了,今天复习一遍.... //先声明一个异步请求对象var xmlHttpReg = null;function ajax() {if ( ...
原生Aajax 和jQuery Ajax 写法个人总结（简单）
AJAX:即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.本文重点给大家介绍原生 ...
第 4 章：Vue 中的 ajax
学习资料来自尚硅谷VUE教学视频 csdn:课程代码.vue3笔记.课件 gitee:课件.代码.资料其他:vscode插件推荐.第三方库网站.npmjs库工具库推荐: moment.js 时间处 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
不同浏览器 ajax,完整的 AJAX 写法(支持多浏览器)
代码如下: var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,I ...
java如何构造ajax回调参数,jQuery实现ajax回调函数带入参数的方法示例
本文实例讲述了jQuery实现ajax回调函数带入参数的方法.分享给大家供大家参考,具体如下: 不带参数的写法: function pass(htmlId,auditingFlag){ var url ...
关于Jquery中ajax方法data参数用法的总结
关于Jquery中ajax方法data参数用法的总结 jquery手册描述: 示例: $.ajax({type: "POST",url: "some.php", ...
ajax post提交数组6,jQuery的ajax()、post()方法提交数组，参数[] 问题
当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List,或Integer[] 等数组对象进行接收. 比如: $.ajax({ type: "POST", u ...

vue、jQuery的Ajax写法

VUE

axios（不支持发送跨域的请求）

vue-resource（支持发送跨域的请求）

jQuery

vue、jQuery的Ajax写法相关推荐

最新文章

热门文章