使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017-06-06 11:42
615 查看
废话不多说,直接上代码
html代码
js代码
json文件
为了模拟请求使用本地的json文件,正式开发可将Jquery ajax的url换成接口地址。
文件目录结构见下(不能上传附件,需要源码的私聊)
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"></script> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{message }}<br> <button v-on:click="showData">测试jquery加载数据</button> <table border="1"> <tr v-for="data in datas"> <td>{{data.Name}}</td> <td>{{data.Url}}</td> <td>{{data.Country}}</td> </tr> </table> </div> <script src="js/app.js"></script> </body> </html>
js代码
/** * Created by sen on 2016/10/31. */ //定义Vue组件 var vum=new Vue({ el: "#app", data: { message: "", datas: "", }, methods:{ showData:function () { jQuery.ajax({ type: 'Get', url: "/vue1/json/data.json", success: function (data) { vum.datas = data.sites; } }) } } }) //使用jquery jQuery(function () { // jQuery("#btn_1").bind("click", function () { // alert(jQuery("#name").val()); // }); loadData(); }) //jquery加载数据 function loadData() { jQuery.ajax({ type: 'Get', url: "/vue1/json/data.json", success: function (data) { vum.message = data.sites[0].Name; } }) }
json文件
{ "sites": [ { "Name": "百度", "Url": "www.baidu.com", "Country": "CN" }, { "Name": "Google", "Url": "www.google.com", "Country": "USA" }, { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" }, { "Name": "微博", "Url": "www.weibo.com", "Country": "CN" } ] }
为了模拟请求使用本地的json文件,正式开发可将Jquery ajax的url换成接口地址。
文件目录结构见下(不能上传附件,需要源码的私聊)
相关文章推荐
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- eval解析JSON中的注意点 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数。 2. 使用Function对象来进行返回解析。 使用eval
- 使用JS实现页面内跳转的两种方式
- Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比
- 基于vue中css预加载使用sass的配置方式详解
- Javascript vue.js表格分页,ajax异步加载数据
- 使用PM2搭建在线vue.js开发环境(以守护进程方式热启动)
- extjs4.1 和struts2结合使用时延迟加载js,可使用extjs的mvc模式
- Vue.js学习系列(四十三)-- 使用props传递数据
- 使用Webpack加速Vue.js应用的4种方式
- js方式清空表单数据的两种方式
- STM32使用串口IDLE中断的两种接收不定长数据的方式
- 4.Spark SQL:数据源Parquet之使用编程方式加载数据
- 4.Spark SQL:数据源Parquet之使用编程方式加载数据
- html&js的两种结合方式
- 控件开发时两种JS嵌入资源方式的使用方法
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- vue.js中使用vueResource向后台请求数据时出现跨域访问失败的问题
- asp.net 使用js分页实现异步加载数据
- 使用 Vue.js 实现加载更多功能