vue ajax 与后台交互问题

原创 2018年04月15日 13:43:09

之前对 vue 做过简单的了解,但是对如何使用 vue 与后台进行数据交互仍是一知半解。

今天通过我的毕业设计,我了解了如何使用 vue 进行数据交互。

本来打算使用 vue-resource,但尝试了几次都没有成功,最后使用 ajax 成功了。

贴上代码如下:

注意,首先要在页面上引入  jQuery.js  以及 vue.js.

					<div class="input-group wsh-article-kind" id = "wsh-book-kind" >
						<div class="input-group-btn"  >
							<button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
								书评分类 
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu"  >
								<li v-for="kinds in rows">
									<div class ="wsh-padding-left6"><a href="#">{{kinds.articleKindName}}</a></div>
									<div class="divider"></div>
								</li>
								
							</ul>
						</div><!-- /btn-group -->
						<input type="text" class="form-control">
					</div><!-- /input-group -->

重点注意其中的 id , v-for,以及 kinds in rows。 rows 是 vue 接收的数据,kind 相当接收 rows 的参数。

写上 v-for 的代码块本身会不断循环,{{}} 中的数据就是要展示的数据。

js 代码如下:

$.ajax({  
    type : "POST",  
    url : path+"getBookKind",  
    data : '',  
    contentType : "application/json",  
    dataType :"json" ,
    success:function(msg) { 
        new Vue({
          el: '#wsh-book-kind',
          data: {
            rows:msg
          }
      });
    },
    error:function(err){
        alert("request failed!");
        }
    });  

其中 el ,rows 都是与 html 界面中的数据相对应的,返回的数据为 json 格式。

最后在前端展示的界面效果如下:

【算了不知道为什么图片传不了,但是就是可以展示正常的下拉列表就对了。】


ajax请求插件vue-resource的学习

http://cn.vuejs.org/guide/plugins.htmlajax请求插件vue-resource的学习https://github.com/vuejs/vue-resource/b...
  • github_26672553
  • github_26672553
  • 2016-10-30 20:34:30
  • 27542

分享一个vue写的购物车插件

先上效果图 下面相关代码,    我的vue购物车                     购物车...
  • qq_30632003
  • qq_30632003
  • 2017-06-30 10:44:02
  • 1704

vue与后端数据交互(ajax):vue-resource

必须引入一个库:vue-resource1.获取普通文本数据 比如:a.txt:welcomet to vue!!! ...
  • github_26672553
  • github_26672553
  • 2017-01-20 14:11:09
  • 18675

vue.js与后台数据交互

第一步:引入js库: 前端代码: vue example
  • qq_17505335
  • qq_17505335
  • 2018-01-23 11:34:51
  • 1098

Vue.js的开发流程

简单快速了解Vue.js的开发流程    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文主要介绍 vue.js的开发...
  • Lucky_LXG
  • Lucky_LXG
  • 2017-03-27 11:33:35
  • 3789

vue2.0中的插件axios交互

安装使用 npm:$ npm install axios 使用 bower:$ bower install axios 使用 cdn:&amp;lt;script src=&quot;https://...
  • Lschange
  • Lschange
  • 2018-03-01 11:09:26
  • 111

ajax调后台servlet,把返回json用vue做绑定

1. 描述 最近项目需要开发微信手机端,本来用的架构是bootstrap+jquery,但每次数据绑定前台的时候jquery都把javascript代码和html代码混着写,违背业务与界面...
  • stevennest
  • stevennest
  • 2016-06-19 11:14:29
  • 5161

vue.js 2.0入门级前端和后台数据交互

vue.js 2.0入门级前端和后台数据交互
  • qq_24586113
  • qq_24586113
  • 2017-11-28 16:19:58
  • 632

vue-resource插件使用

本文的主要内容如下: 介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inte...
  • hsany330
  • hsany330
  • 2016-11-17 11:19:39
  • 3227

VueJs百度统计插件

vue-ba vuejs 百度统计埋点插件 转载https://minlingchao1.github.io/2017/07/13/VueJs%E7%99%BE%E5%BA%A6%E7%BB%...
  • sinat_17775997
  • sinat_17775997
  • 2017-09-08 09:22:57
  • 2330
收藏助手
不良信息举报
您举报文章:vue ajax 与后台交互问题
举报原因:
原因补充:

(最多只允许输入30个字)