vue.js中ajax请求

<div id="app">
    <table style="border-collapse: collapse">
        <thead>
            <tr  style="line-height: 30px;">
                <th style="width:20px; padding: 0 10px; border: 1px solid #ccc;">id</th>
                <th style="width:150px; padding: 0 10px; border: 1px solid #ccc;">item_name</th>
                <th style="width:500px; padding: 0 10px; border: 1px solid #ccc;">content</th>
                <th style="width:80px; padding: 0 10px; border: 1px solid #ccc;">way</th>
                <th style="width:150px; padding: 0 10px; border: 1px solid #ccc;">method</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="items in message" style="line-height: 30px;">
                <td style="width:20px; padding: 0 10px; border: 1px solid #ccc;">{{ items.id }}</td>
                <td style="width:150px; padding: 0 10px; border: 1px solid #ccc;">{{ items.item_name }}</td>
                <td style="width:500px; padding: 0 10px; border: 1px solid #ccc;">{{ items.content }}</td>
                <td style="width:80px; padding: 0 10px; border: 1px solid #ccc;">{{ items.way }}</td>
                <td style="width:150px; padding: 0 10px; border: 1px solid #ccc;">{{ items.method }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
  var app = new Vue({
        el:"#app10",
        data:{
            message:‘‘
        },
        methods:{
            created:function(){
                var sss = this;
                $.ajax({
                    url:"请求地址",
                    success:function(e){
                        sss.message = e.data;
                        console.log(sss.message)
                    }
                })
            }
        }
    });
    app.created();
</script>

  

时间: 2024-07-30 03:25:37

vue.js中ajax请求的相关文章

js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法判断 接受的http请求是否是 ajax请求了. 怎么办呢,显然就是给http 请求头中 加上这个字段就可以了. 1.AngularJS 中可以这样子: I don't know well MVC3 but you can set a custom header for all request fr

【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例

<body><textarea id='a' rows=100 cols=300>result:</textarea>><script>var a=document.getElementById("a");var http1=new XMLHttpRequest;http1.open("GET","http://apis.baidu.com/heweather/weather/free?city=zhe

js中ajax请求数据之后的click事件失效问题

// 初始化数据的时候 $('.shoucang .img-1').click(function(){ // code... }); // ajax加载后click事件不执行,又改成这样 $('.shoucang .img-1').live("click",function(){ // code... }); //jQuery1.9之后由于live被删除了,所以应该这样写: $(document).on("focus","a",function(

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

Vue.js&mdash;&mdash;基于$.ajax实现数据的跨域增删查改

概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说起ajax请求,大家第一时间会想到jQuery.除了拥有强大的DOM处理能力,jQuery提供了较丰富的ajax处理方法,它不仅支持基于XMLHttpRequest的ajax请求,也能处理跨域的JSONP请求. 之前有读者问我,Vue.js能结合其他库一起用吗?答案当然是肯定的,V

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

js实现AJAX请求

摘自:http://www.myexception.cn/javascript/1448345.html AJAX:全称“Asynchronous JavaScript and XML”(异步的JavaScript与XML) AJAX请求的特点: 1.不刷新页面 2.服务器仅返回需要的数据 AJAX引擎:XMLHttpRequest此对象是浏览器中的内置对象,在目前的所有浏览器中都支持此对象. IE中获取此对象: if(window.ActiveXObject){            var

angular.js和vue.js中实现函数去抖(debounce)

问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间.本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖. angular.js中解决方案 把去抖函数写成一个service,方便多处调用: .factory('debounce', ['$timeout','$q', function($timeou