jsonp跨域请求,vue-resource + php前后端分裂做webapp

9 篇文章 0 订阅
7 篇文章 0 订阅

PHP做响应jsonp的操作。

我做跨域用到了vue-resource ,这个百度一下就能下载:

下面是HTML页面ajax:

加上 v-model=" " 之后;js方法里会检查到里面的 value 值


<script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script> 

<script src="js/lib/vue-resource.js" type="text/javascript" charset="utf-8"></script>


<input class="name-input" type="text" name="" value="" v-model="name"/> 

<input class="password-input" type="password" name="" value="" v-model="password"/>

<span class="login-btn" @click="add()">登录</span>


<script>      
var vm = new Vue({
 el: ".main",
        data: {
            name: "",
            password: ""
        },
        methods: {
            add: function () {
                this.$http.jsonp("域名/login"
, {
name: this.name,
pass: this.password
}
                ).then(function (res) {
if (res.data.type == "1") {
window.location.href = "cg.html";
} else {
alert("账号密码错误")
}
}, function (res) {
alert("验证失败请重新登录")
});
            }
        }
    })
</script>
public function login(){
$callback = $_GET['callback'];  //这个很重要
$name = $_GET['name'];
$pass = $_GET['pass'];
 
if($name=='123456' and $pass=='123456'){
$json = array('type'=>1,'name'=>$name,'pass'=>$pass);  //登录值错误
} else {
$json = array('type'=>0,'name'=>$name,'pass'=>$pass);  //登录值正确
}
$date = json_encode($json);

echo $callback."($date)";
}


成功后则跳转到cg.html页面;




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值