lan his src 操作 ajax请求 itl func gin 出错
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <script src="../vue2.4.4.js">
- </script>
- <script src="../axios.js">
- </script>
- </head>
- <body>
- <!-- 定义一个vue的管理区块,(MVVM中的View) -->
- <div id="app">
- <button @click="getApiData">
- 点击得到数据
- </button>
- {{name}}
- </div>
- </body>
- <script>
- // 实例化vue对象(MVVM中的View Model)
- new Vue({
- // vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析
- el: ‘#app‘,
- data: {
- // 数据 (MVVM中的Model)
- name: ""
- },
- methods: {
- getApiData: function() {
- //设置请求路径
- var url = "http://157.122.54.189:9093/api/getprodlist";
- // 发送请求:将数据返回到一个回到函数中
- _this = this;
- // 并且响应成功以后会执行then方法中的回调函数
- axios.get(url).then(function(result) {
- // result是所有的返回回来的数据
- // 包括了响应报文行
- // 响应报文头
- // 响应报文体
- console.log(result.data.message[0]);
- _this.name = result.data.message[0].name;
- });
- }
- }
- })
- </script>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <script src="../vue2.4.4.js"></script>
- <script src="../axios.js"></script>
- </head>
- <body>
- <!-- 定义一个vue的管理区块,(MVVM中的View) -->
- <div id="app">
- <button @click="postApiData">点击提交数据</button>
- </div>
- </body>
- <script>
- // 实例化vue对象(MVVM中的View Model)
- new Vue({
- // vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析
- el:‘#app‘,
- data:{
- // 数据 (MVVM中的Model)
- },
- methods:{
- postApiData:function() {
- var url = "http://157.122.54.189:9093/api/addproduct";
- // post有两个参数
- //参数1:请求的路径
- //参数2:提交的参数
- //提交参数的两种形态:
- // 1.可以直接传入字符串 name=张三&age=19
- // 2.可以以对象的形式传入{name:"三",age:19}
- axios.post(url,{name:"拖油瓶前来报道"}).then(function(res) {
- var resData = res.data;
- if(resData.status == "0") { //0表示成功,1表示失败
- alert(resData.message);
- }else{
- alert(resData.message);
- }
- });
- }
- }
- })
- </script>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <script src="../vue2.4.4.js"></script>
- <script src="../axios.js"></script>
- </head>
- <body>
- <!-- 定义一个vue的管理区块,(MVVM中的View) -->
- <div id="app">
- <button @click="getApiData">点击得到数据</button>
- <button @click="postApiData">点击提交数据</button>
- {{name}}
- </div>
- </body>
- <script>
- //细节处理一:可以给axios的ajax请求设置统一的主机和端口号
- axios.defaults.baseURL = "http://157.122.54.189:9093/";
- //细节处理二: 可以将axios这个对象添加到Vue的原型对象中,将来在使用的时候就只需要使用this.对象名就可以了
- Vue.prototype.$http = axios;
- // 实例化vue对象(MVVM中的View Model)
- new Vue({
- // vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析
- el:‘#app‘,
- data:{
- // 数据 (MVVM中的Model)
- name:""
- },
- methods:{
- getApiData:function() {
- //设置请求路径
- var url = "api/getprodlist";
- // 发送请求:将数据返回到一个回到函数中
- _this= this;
- // 并且响应成功以后会执行then方法中的回调函数
- this.$http.get(url).then(function(result) {
- // result是所有的返回回来的数据
- // 包括了响应报文行
- // 响应报文头
- // 响应报文体
- _this.name = result.data.message[0].name;
- }).catch(function(){
- alert("出错了");
- });
- },
- postApiData:function() {
- var url = "api/addproduct";
- // post有两个参数
- //参数1:请求的路径
- //参数2:提交的参数
- //提交参数的两种形态:
- // 1.可以直接传入字符串 name=张三&age=19
- // 2.可以以对象的形式传入{name:"三",age:19}
- this.$http.post(url,{name:"拖油瓶前来报道3 "}).then(function(res) {
- var resData = res.data;
- if(resData.status == "0") { //0表示成功,1表示失败
- alert(resData.message);
- }else{
- alert(resData.message);
- }
- }).catch(function(){
- alert("出错了");
- }); ;
- }
- }
- })
- </script>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- #app { width: 600px; margin: 10px auto; } .tb { border-collapse: collapse;
- width: 100%; } .tb th { background-color: #0094ff; color: white; } .tb
- td, .tb th { padding: 5px; border: 1px solid black; text-align: center;
- } .add { padding: 5px; border: 1px solid black; margin-bottom: 10px; }
- </style>
- <script src="../vue2.4.4.js">
- </script>
- <script src="../axios.js">
- </script>
- </head>
- <body>
- <div id="app">
- <div class="add">
- 品牌名称:
- <input v-model="name" type="text">
- <button @click="add">
- 添加
- </button>
- </div>
- <div class="add">
- 品牌名称:
- <input type="text">
- </div>
- <div>
- <table class="tb">
- <tr>
- <th>
- 编号
- </th>
- <th>
- 品牌名称
- </th>
- <th>
- 创立时间
- </th>
- <th>
- 操作
- </th>
- </tr>
- <tr v-if="list.length <= 0">
- <td colspan="4">
- 没有品牌数据
- </td>
- </tr>
- <!--加入: key="index" 时候必须把所有参数写完整 -->
- <tr v-for="(item,key,index) in list" :key="index">
- <td>
- {{item.id}}
- </td>
- <td>
- {{item.name}}
- </td>
- <td>
- {{item.ctime}}
- </td>
- <td>
- <a href="#" @click="del(item.id)">
- 删除
- </a>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
- </html>
- <script>
- // 1 将所有的主机名和端口 一起设置
- axios.defaults.baseURL = "http://157.122.54.189:9093";
- // 2 将axios添加到Vue的原型对象中
- Vue.prototype.$http = axios;
- var vm = new Vue({
- el: "#app",
- data: {
- name: ‘‘,
- list: [] // 数据应该来源于服务器提供的api
- },
- mounted: function() { //钩子函数
- this.getList();
- },
- methods: {
- // 得到所有的列表数据,这个方法应该等页面加载完成以后直接被调用的
- getList: function() {
- var url = "/api/getprodlist";
- // 改变this的指向
- _this = this;
- this.$http.get(url).then(function(result) {
- var res = result.data;
- if (res.status == 0) {
- //将数据赋值给list
- _this.list = res.message;
- } else {
- alert("出错了");
- }
- }).
- catch(function() {
- alert("出错了");
- });
- },
- // 得到文本框中的值,并且将值通过api提交到服务器
- add: function() {
- var url = "/api/addproduct";
- _this = this;
- // 得到name属性对应的值
- this.$http.post(url, {
- "name": this.name
- }).then(function(result) {
- var res = result.data;
- if (res.status == "0") {
- alert(res.message);
- _this.getList();
- } else {
- alert(res.message);
- }
- }).
- catch(function() {
- alert("出错了");
- });
- },
- del: function(id) {
- //格局id删除数据
- var url = "/api/delproduct/" + id;
- // 发送异步请求
- _this = this;
- this.$http.get(url).then(function(result) {
- var res = result.data;
- if (res.status == "0") {
- alert(res.message);
- //更新数据
- _this.getList();
- } else {
- alert(res.message);
- }
- }).
- catch(function() {
- alert("出错了");
- });
- }
- }
- });
- </script>
Vue--axios:vue中的ajax异步请求(发送和请求数据)
lan his src 操作 ajax请求 itl func gin 出错
原文:http://www.cnblogs.com/mrszhou/p/7859012.html
来源: http://www.bubuko.com/infodetail-2400313.html