vue发送ajax请求（vue ajax请求一般写在哪）

本文目录

• vue ajax请求一般写在哪
• vue中请求的几种方式
• vuejs和后台交互时，怎么发送请求和接收请求
• 使用vue的ajax-post请求调用接口
• 解决ajax发送请求无法设置cookie问题
• 接口返回302 Found

vue ajax请求一般写在哪

mounted 函数里面通过 ajax 从后台获取数据并绑定到变量上,
然后事件响应里面把变量的值通过 ajax 发送给后台处理.
基本就是这两种情况

vue中请求的几种方式

***隐藏网址***

一个不错的项目

***隐藏网址***
vue  jsonp

***隐藏网址***
一.万能的Jquery (在存在跨域的情况下，目前用Jquery来请求)

$.ajax({

***隐藏网址***

                type: "POST",                   //请求方式（跨域的话默认get提交，）

                data: this.param,              //请求参数

                async:true,                       //是否异步

                dataType: ’jsonp’,              // 返回数据类型

                beforeSend: function(xhr,settings) {

                }

            }).then(function(data) {

                console.log(data)

                }

            });
二. vue-resource  

1，安装——npm install vue-resource

***隐藏网址***

        param1:value1, 

        param2:value2 

    }).then(function(response){ 

        // response.data中获取ResponseData实体   

 },function(response){ 

        // 发生错误    

        console.log(response)

});

***隐藏网址***

        param1:value1, 

        param2:value2 

    },{ 

        emulateJSON:true 

    }).then(function(response){ 

        // response.data中获取ResponseData实体    

},function(response){ 

        // 发生错误    

});
this.$jsonp(’url’, data ).then(json =》 {

                json 就是返回数据

                if(json.code != "002"){

                    alert(json.msg);

                }else{
                }

            }).catch(err =》 {

            　　console.log(err)

            })

三. 、axios  

1.使用npm install来进行安装。 使用npm install来进行安装。

2.在准备使用的vue页面中，引入Axios，  import axios from ’axios’

//读取分类商品列表    created钩子函数中

***隐藏网址***

      .then(response=》{

        console.log(response);

      })

      .catch(error=》{

          console.log(error);

          alert(’网络错误，不能访问’);

      })

POST:  axios.post(’/user’, {     //默认json

        firstName: ’Fred’,

        lastName: ’Flintstone’    })

.then(function(response){      

  // response.data中获取ResponseData实体    

})

.catch(function(error){   

     // 发生错误   

 });

vuejs和后台交互时，怎么发送请求和接收请求

***隐藏网址***

main.js这样配置

同时Vue这样请求

express后台这样就能接收到post过来的数据，这是最简单的一种用法

OK，前台也拿到了请求的数据

使用vue的ajax-post请求调用接口

一般来说post请求应该传递对象，而不是直接传递数组，直接传递数组后端可能无法获取到你传过去的参数，个人建议要么吧你传过去的参数序列化，要么把这个数组JSON.stringify()转换成json字符串传递过去

解决ajax发送请求无法设置cookie问题

解决ajax发送请求无法设置cookie问题

前端jquery

***隐藏网址***

***隐藏网址***

let username = ’abc’

let password = ’abc’

$.ajax({

          url: url,

          type: ’post’,

          data: {

            mobile: username,

            mobilepwd: password,

          },

          xhrFields: {

            withCredentials: true

          },

          dataType: ’json’,

          success: function (res) {

            console.log(res)

            if (res.status == 1) {

              window.location.href = url

            }

          }

        })
前端vue

var $this = this;

***隐藏网址***

let data = {

    mobile:123,

    mobilepwd:123,

}

$this.$axios.defaults.withCredentials = true

$this.$axios.post(url,data)

  .then((res) =》 {

    console.log(res.data)

  })
php后台设置

header(’Access-Control-Allow-Origin:’.$_SERVER);

header("Access-Control-Allow-Credentials: true");

解释两个header的作用

我们在客户端设置了withCredentials=true 参数，对应着，服务器端要通过在响应 header 中设置Access-Control-Allow-Credentials = true来运行客户端携带证书式的访问。通过对Credentials参数的设置，就可以保持跨域Ajax时传递的Cookie。

发送ajax请求，我们发现还会出现一个错误，提示我们Access-Control-Allow-Origin不能用*通配符。原因是：当服务器端Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin的值不能为’*’。

我们重新设置Access-Control-Allow-Origin的值，当服务器端接收到请求后，在返回响应时，把请求的域Origin填写到响应的Header信息里（即谁访问我，我允许谁）

接口返回302 Found

vue项目，axios请求。
首先 ，如果不加以上请求头的话，返回的是302。这个时候在axios里面是报错的，直接走error。且response为undefined的，status为0。如下图（问题：为什么返回到status和接口显示到status code 不一致？）

其次 ，加上请求头设置。
axios

ajax

这个时候返回的是200，且能获取返回的信息。前端应该根据信息去重定向。
原因 ：
X-Requested-With请求头用于在服务器端判断request来自Ajax请求还是传统请求（包括表单提交，a标签 img标签等）。
我的理解是即便不加这个请求头，我们发送的也是ajax请求，但是服务器不知道，所以是服务器强制要求，加上这个会判断为ajax请求。目前我们的项目，是通过单点登录系统做了一层拦截。也就是单纯的后台系统来判断的，如果不加这个请求头，单点登录系统就拦截到，直接给302了。如果加上了，就可以正确访问我们的接口，这个时候才能走到接口里面，拿到正确的返回值。 这里再判断是否登录过，返回不同的值。