-
2019-04-03 15:53:42
如果单纯的通过jQuery拼接ajax响应的数据操作DOM的话,会感觉特别复杂,jQuery的template模板就很大程度上相似于VUE.js的逻辑,以下代码仅供参考:
var vm = new Vue({ el : '#controller', data : { res :{} }, mounted : function () { var that = this; $.ajax({ url : 'XXXXXX', // 配置参数 }).done(function (res) { that.res.names = res.data.names; // 以此类推 }).fail(function () { console.log("请求失败") }) } })
<div id="controller"> <div>响应的文本:{{res.names}}</div> </div>
更多相关内容 -
vue-ajax小封装实例
2020-12-12 13:31:00new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson) * url: 需要获取数据的文件地址 (string) * data: 需要发送的信息 (可省略) (obj) * fn: 获取信息后的回调函数,接收到的返回值... -
jquery和vue发送ajax请求
2021-04-13 12:13:32jquery发送ajax请求 <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> <script type="text/javascript"> $.ajax({ type: "GET",//请求方式 url: ...jquery发送ajax请求
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
<script type="text/javascript"> $.ajax({ type: "GET",//请求方式 url: "https://mock.yonyoucloud.com/mock/15640/infors",//请求地址 data: { //发送的数据json格式 }, dataType: "json", success: function(data) { console.log(data);//发送成功,可对数据进行操作 } }); </script>
vue发送ajax请求
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script> var app = new Vue({ el: '#app', data: {}, methods: {}, mounted() { //数据的创建//路径//参数//transformRequest:将参数解析发送数据 axios.post('/exam/data',{'id':1},{ transformRequest:[ function(data){ let params = ''; for(let index in data){ params +=index+'='+data[index]+'&'; } return params; } ] }).then((res)=>{ console.log(res.data) }); }, }) </script>
-
如何用jquery在vue中发起ajax请求
2021-08-07 00:20:44在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。看下例:new Vue({el:'#app',data:{data:""},created:function(){var url="json.jsp";var _self=this;$.get...在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。
看下例:
new Vue({
el:'#app',
data:{data:""},
created:function(){
var url="json.jsp";
var _self=this;
$.get(url,function(data){
_self.data=eval("(" + data +")");
})
/*
this.$http.get(url).then(function(data){
var json=data.body;
this.data=eval("(" + json +")");
},function(response){
console.info(response);
})*/
}
});
这里必须设置 vue的data的初始数据,即使此时数据为空。
在使用ajax获取数据时,使用vue-resource 更加合适。
使用vue-resource代码如下:
new Vue({
el:'#app',
data:{data:""},
created:function(){
var url="json.jsp";
this.$http.get(url).then(function(data){
var json=data.body;
this.data=eval("(" + json +")");
},function(response){
console.info(response);
})
}
});
这里我们看到设置VUE实例数据时,直接使用 this.data 就可以设置vue的数据了。
使用jquery的时候,代码如下:
new Vue({
el:'#app',
data:{data:""},
beforeCreate:function(){
var url="json.jsp";
var _self=this;
$.get(url,function(data){
_self.data=eval("(" + data +")");
})
}
});
这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用,这样使用起来没有vue-resource方便。
-
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2020-10-18 06:15:16今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue、jQuery的Ajax写法
2019-10-05 18:00:26AJAX AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不...VUE
vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护
axios(不支持发送跨域的请求)
- axios([options])
send() { axios({ method: 'get', //只能用get url: '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.user transformRequest: [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.Js结合Jquery Ajax加载数据的两种方式
2021-08-06 06:09:13整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享。废话不多说,直接上代码html代码demo{{message }}测试jquery加载数据{{data.name}}{{data.url}}{{data.country... -
Vue使用jQuery ajax加载数据页面无显示解决方法
2018-10-23 15:36:07无数据代码为 <script&... new Vue({ el:"#demo", data:{list:find()} }) function find(){ var ss; $.ajax({ type: "post", url: "studentact... -
vue基本环境+jquery ajax应用
2018-04-24 14:57:08有需要的朋友可以下载参考一下,vue本身没有ajax功能要配合axios才行, 在不用这个的话就可以用jquery配合实现 -
【代码片段】vue中使用jquery发送ajax请求封装
2019-08-02 08:36:14首先确保你的vue项目中已经安装了jquery,如果没有请先安装。 src/request/request.js : import $ from "jquery" var app_debug = true; if (app_debug == true) { var HTTP_HOST = "http://开发环境地址"; } ... -
详解vue 中使用 AJAX获取数据的方法
2021-01-19 16:20:55在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。 看下例: [removed] new Vue({ el:'#app', data:{data:}, created:function(){ var url=json.jsp; var... -
使用Vue.Js结合Jquery Ajax加载数据的两种方式
2016-10-31 17:06:00为了模拟请求使用本地的json文件,正式开发可将Jquery ajax的url换成接口地址。 文件目录结构见下(不能上传附件,需要源码的私聊) 转载于:... -
jQuery和vue 设置ajax全局请求
2021-08-06 08:26:33一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录。...但是ajax方法并不能通过后台直接跳转。所以我们可以写一个ajax...以下是引用jQuery的ajax全局方法:$.ajaxSetup({error : functi... -
jQuery,ajax,vue用法详解
2019-06-17 20:20:52jQuery ajax vue用法详解 1. 入口函数 $(function(){ }) 2. 选择器 $("选择器") $('li[id=box]') $('li').not() $('li:first')/$('li').first() $('li:last')/$('li').last() $('li:eq(-2)')/$('li')... -
java web学习笔记:vue与jquery ajax混用
2021-05-15 10:16:01var app = new Vue({ el:'#app', data:{ active: 0, status:['进行中', '步骤 2', '步骤 3'], showPages: [true, false, false], security_code:'' }, methods:{ onSubmit: function -
Vue中ajax返回结果赋值
2020-01-10 16:42:22这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, created:function(){ $.ajax({ url:'', data:'',... -
vue+jquery 实现ajax
2018-04-19 18:12:47<!DOCTYPE &... vue </title> <meta charset="utf-8" /> <script src="vue.min.js"></script> < -
Jquery中ajax提交表单几种方法(get、post两种方法)
2020-12-04 00:33:59在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我... -
vue和jQuery混用之 ajax调用成功后无法引用vue方法
2021-07-01 00:10:13问题起因:需要在ajax异步添加操作之后弹框(Vue element弹框组件),但是一直报错this.$message is not a function,经过测试后排除环境问题,因为在ajax之前弹框正常,而且数据正常插入成功,那就是调用success方法的时候... -
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2020-10-18 19:08:24下面小编就为大家分享一篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Ajax在vue中的封装及使用
2019-02-28 02:45:33今天给大家写一篇关于ajax在vue中的应用及封装,有些同学可能会有疑问,因为熟悉...其实不然,ajax有ajax的优势,并且小编本身对ajax有着特殊的感情,今天就给大家详细详解ajax在vue中的应用。 首先我们有必要配置... -
VUE ajax解决同步请求问题
2018-09-06 11:08:09由于目前没有发现axios可以同步请求,所以只能...vue 安装jQuery插件: $ npm install jquery --save 在程序中引入$ import $ from 'jquery'; 具体代码 $.ajax({ url:'',//url路径 type:'POST', //GET ... -
Vue-cli--jquery.ajax调用接口跨域问题( No ‘Access-Control-Allow-Origin‘ )
2021-12-13 15:48:12Vue-cli--jquery.ajax调用接口跨域问题( No 'Access-Control-Allow-Origin' ),接口无法加载响应数据 本人小白一个,在调用后台给的接口时,频频报错,特此记录一下 项目是vue-cli搭建,分正式测试环境,接口使用... -
vue的ajax
2021-08-08 04:13:59vue的ajax常见的有两种 ,一种是 vue-resource,一种是axiosvue-resource:是vue的插件,非官方库, vue1.x 使用广泛如何使用:先在vue的脚本架上安装vue-resorce库npm install vue-resource --save在我们需要用到ajax的... -
vue 配置代理方式一有点不完美的方法(ajax跨域问题)
2021-07-25 19:10:29这边我们vue推荐使用它axios,体积小兼容性高(axios与jQuery都是基于xhr) xhr使用麻烦,jQuery库太大其中大约百分之八十是分装dom的内容 fetch与xhr同级,但是fetch使用时要promise两次而且兼容性不好,对ie浏览器会...