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頁面;