精华内容
下载资源
问答
  • Vue配合jQuery+Ajax使用
    千次阅读
    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:00
    new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson) * url: 需要获取数据的文件地址 (string) * data: 需要发送的信息 (可省略) (obj) * fn: 获取信息后的回调函数,接收到的返回值...
  • jqueryvue发送ajax请求

    2021-04-13 12:13:32
    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: ...

    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>
    
    展开全文
  • VUE开发时,数据可以使用jqueryvue-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获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vuejQueryAjax写法

    千次阅读 2019-10-05 18:00:26
    AJAX 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加载数据的两种方式的代码,稍微整理精简一下做下分享。废话不多说,直接上代码html代码demo{{message }}测试jquery加载数据{{data.name}}{{data.url}}{{data.country...
  • 无数据代码为  &lt;script&... new Vue({ el:"#demo", data:{list:find()} }) function find(){ var ss; $.ajax({ type: "post", url: "studentact...
  • 有需要的朋友可以下载参考一下,vue本身没有ajax功能要配合axios才行, 在不用这个的话就可以用jquery配合实现
  • 首先确保你的vue项目中已经安装了jquery,如果没有请先安装。 src/request/request.js : import $ from "jquery" var app_debug = true; if (app_debug == true) { var HTTP_HOST = "http://开发环境地址"; } ...
  • VUE开发时,数据可以使用jqueryvue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。 看下例: [removed] new Vue({ el:'#app', data:{data:}, created:function(){ var url=json.jsp; var...
  • 为了模拟请求使用本地的json文件,正式开发可将Jquery ajax的url换成接口地址。   文件目录结构见下(不能上传附件,需要源码的私聊) 转载于:...
  • 一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录。...但是ajax方法并不能通过后台直接跳转。所以我们可以写一个ajax...以下是引用jQueryajax全局方法:$.ajaxSetup({error : functi...
  • jQuery,ajax,vue用法详解

    2019-06-17 20:20:52
    jQuery ajax vue用法详解 1. 入口函数 $(function(){ }) 2. 选择器 $("选择器") $('li[id=box]') $('li').not() $('li:first')/$('li').first() $('li:last')/$('li').last() $('li:eq(-2)')/$('li')...
  • var app = new Vue({ el:'#app', data:{ active: 0, status:['进行中', '步骤 2', '步骤 3'], showPages: [true, false, false], security_code:'' }, methods:{ onSubmit: function
  • Vueajax返回结果赋值

    千次阅读 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
    &lt;!DOCTYPE &... vue &lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;script src="vue.min.js"&gt;&lt;/script&gt; &lt
  • jqueryajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...
  • 问题起因:需要在ajax异步添加操作之后弹框(Vue element弹框组件),但是一直报错this.$message is not a function,经过测试后排除环境问题,因为在ajax之前弹框正常,而且数据正常插入成功,那就是调用success方法的时候...
  • 下面小编就为大家分享一篇使用AjaxJquery配合数据库实现下拉框的二级联动的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天给大家写一篇关于ajaxvue中的应用及封装,有些同学可能会有疑问,因为熟悉...其实不然,ajaxajax的优势,并且小编本身对ajax有着特殊的感情,今天就给大家详细详解ajaxvue中的应用。 首先我们有必要配置...
  • 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' ),接口无法加载响应数据 本人小白一个,在调用后台给的接口时,频频报错,特此记录一下 项目是vue-cli搭建,分正式测试环境,接口使用...
  • vueajax

    2021-08-08 04:13:59
    vueajax常见的有两种 ,一种是 vue-resource,一种是axiosvue-resource:是vue的插件,非官方库, vue1.x 使用广泛如何使用:先在vue的脚本架上安装vue-resorce库npm install vue-resource --save在我们需要用到ajax的...
  • 这边我们vue推荐使用它axios,体积小兼容性高(axios与jQuery都是基于xhr) xhr使用麻烦,jQuery库太大其中大约百分之八十是分装dom的内容 fetch与xhr同级,但是fetch使用时要promise两次而且兼容性不好,对ie浏览器会...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,641
精华内容 8,656
关键字:

vue jquery ajax