vue ajax的使用 get,post,jsonp跨域请求的使用 ajax获取数据后如何绑定数据？

最新推荐文章于 2023-12-13 13:03:30 发布

路过火车

最新推荐文章于 2023-12-13 13:03:30 发布

阅读量636

点赞数 1

分类专栏： javascript PHP vue 文章标签： VUE VUE AJAX VUE JSONP VUE跨域

本文链接：https://blog.csdn.net/weixin_42362496/article/details/103433701

版权

PHP 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

vue如何使用ajax？
vue如何跨域请求？
ajax获取数据后如何绑定数据？

jsonp跨域出现Cross-Origin Read Blocking (CORB) blocked cross-origin response 报错解决方法？
答：注意json格式的返回，需要返回jsonp的格式。

前端代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>

<body>
    <div id="box">
        <input type="button" value="get请求" @click="getClick">
        <input type="button" value="post请求" @click="postClick">
        <input type="button" value="jsonp请求" @click="jsonpClick">
    </div>

<div id="app">
		{{message}}
</div>

    <script>

	var vv=new Vue({
			el:'#app',
			data:{
				message:''
			}
		})
		
        var vm = new Vue({
            el: " #box ",
            data: {},
            methods: {
                getClick() {
                    // 参数1：测试用的地址：http://vue.studyit.io/api/getlunbo
                    // 参数2：[config] 可选
                    this.$http.get("http://127.0.0.1/test.php").then(result => {
                        console.log("ok");
                        console.log(result.body);
                    });
                },
                postClick() {
                    // 参数1：测试用的地址：http://vue.studyit.io/api/getlunbo
                    // 参数2：[data]数据，可为Object，FormData，String，这里为空
                    // 参数3：[config] 可选，但是emulateJSON = "true" 表名表单格式为：application/x-www-form-urlencoded，否则
                    // 可能有的浏览器不认识。
                    this.$http.post("http://127.0.0.1/test.php", "", {
                        emulateJSON: true
                    }).then(result => {
                        console.log(result.body);
                    });
                },
                jsonpClick() {
                	//127.0.0.1修改成跨域的地址
                    this.$http.jsonp("http://127.0.0.1/test.php", {
						params: {},
						jsonp: 'onBack'
					}).then(result => {
                        console.log(result);
                        vv.message=result.body.code;
                    },response => {
    							console.log("发送失败"+response.status+","+response.statusText);
  							}).catch(() => console.log('promise catch err'));
                }
            }
        });
    </script>
</body>

</html>

PHP代码

<?php
$data['code']='1';
$data['msg']='json';

if(isset($_GET['onBack'])){
    echo $_GET['onBack']."(".json_encode($data).")";
}else{
    echo json_encode($data);
}



?>

路过火车

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue ajax的使用 get,post,jsonp跨域请求的使用 ajax获取数据后如何绑定数据？

vue如何使用ajax？vue如何跨域请求？jsonp跨域出现Cross-Origin Read Blocking (CORB) blocked cross-origin response 报错解决方法？答：注意json格式的返回，需要返回jsonp的格式。前端代码：<html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫