1. 程式人生 > >jsonp跨域請求,vue-resource + php前後端分裂做webapp

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

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

相關推薦

jsonp請求vue-resource + php前後分裂webapp

PHP做響應jsonp的操作。 我做跨域用到了vue-resource ,這個百度一下就能下載: 下面是HTML頁面ajax: 加上 v-model=" " 之後;js方法裡會檢查到裡面的 value

Vue專案設定axios不成功的一個小問題( Vue CLI3請求Vue proxyTable配置Access-Control-Allow-Origin )

Vue專案,因為前後端分離,所以在請求後端介面時,時常遇到跨站問題, 2、如果前後端部署在同一個域名,就不會有跨域問題,但一般是生產環境部署是同一個域名下,但在開發環境時,並不是同域名呀,所以開發時呼叫介面返回類似“No 'Access-Control-Allow-Or

Vue vue-resource 全域性攔截器 Post、Get、Jsonp請求、配置請求 全域性路徑配置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../n

vue-resource中的jsonp請求

jsonp的用法   jsonp請求主要是用來解決ajax跨域請求問題,使用jsonp實現跨域首先要保證伺服器api支援jsonp請求的格式。   寫法格式: this.$http.jsonp('ur

jsonp請求php接口

jsonp 跨域 php 使用JQ和原生PHP作為例子: JS代碼: <script src="JQ的地址" type="text/javascript"></script> <script> var testApi = "跨域的地址"; $.ajax({

vue 請求cookie session取不到

雖然後端設定了可以跨域請求,但是後臺設定到cookie中的session取不到!這時候mac電腦自己設定ngaix代理! mac電腦系統重灌了,記錄一下安裝nginx的過程: 1、開啟終端(cmd) 2、安裝Command Line tools

jsonp請求

innerhtml 問題 += outline html www. arr 方法 ctype 跨域是什麽?為什麽我們需要跨域? 跨域是指瀏覽器訪不能問另外一個網站的腳本,這是由於瀏覽器的同源策略造成的,同時也是瀏覽器施加給javascript的安全限制。 但是事實上,用戶瀏

jQuery jsonp請求詳解

路徑 下使用 utf 顯示 我們 ole show height json 跨域的安全限制都是對瀏覽器端來說的,服務器端是不存在跨域安全限制的。 瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。 如果協議,端口和主機對於兩個頁面是相同的,則兩個頁面

輕松搞定JSONP請求

set 合同 bsp 豆瓣 con 註意 wiki str ref 一、同源策略 要理解跨域,先要了解一下“同源策略”。所謂同源是指,域名,協議,端口相同。所謂“同源策略“,簡單的說就是基於安全考慮,當前域不能訪問其他域的東西。 一些常見的是否同源示例可參照下表: 在同源

jsonp請求,常見的集中書寫方式,及優缺點比較

簡介     符合Web2.0特徵的眾多網站一個明顯的特點就是採用Ajax。Ajax提供了在後臺提交請求訪問資料的功能。其實現主要使用的是XMLHttpRequest函式,這個函式允許客戶端的Javascript傳送到伺服器端的HTTP請求並獲得返回資料。Ajax同時也是

[jQuery] jsonp請求

以下內容來源:https://www.cnblogs.com/chiangchou/p/jsonp.html,本文只做記錄。   jQuery jsonp跨域請求   跨域的安全限制都是對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。 瀏覽器的同源策略限制從

轉-jQuery jsonp請求

跨域的安全限制都是對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。 瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。 如果協議,埠和主機對於兩個頁面是相同的,則兩個頁面具有相同的源,否則就是不同源的。 如果要在js裡發起跨域請求,則要進行一些特殊處理了。或者,你可以把請求發

jQuery jsonp請求 jQuery jsonp請求

jQuery jsonp跨域請求   跨域的安全限制都是對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。 瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。 如果協議,埠和主機對於兩個頁面是相同的,則兩個頁面具有相同的源,否則就是不同源的。

jsonp請求報錯Uncaught SyntaxError: Unexpected token :

jsonp跨域請求報錯Uncaught SyntaxError: Unexpected token :遇到就記錄一下: 通過自己不斷倒騰和看別人的部落格,總結如下: 前端程式碼: <div class="container"> <p>更新資訊</p&

Ajax請求無法傳遞及接收cookie資訊

最近在做一個系統遇到一個問題,在網上找個一個和我遇到相同問題的(原文地址:https://www.cnblogs.com/helloyy/p/6109665.html)按照他的步驟還是沒有解決,繼續查詢資料,根據他的方法做出修改,最後解決。(不想寫字就自己拿過來了。。) 應用場景:   專案測試環境:前端

Ajax-jsonp請求簡單樣例

Ajax-jsonp跨域請求說明 1.簡要說明:  跨域的安全限制都是對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。如果協議,埠和主機對於兩個頁面是相同的,則兩個頁面具有相同的源,否則就是不同源的。如果

JSONP請求原理及優缺點

三、使用jquery的jsonp如何發起跨域請求及其原理先看下準備環境:兩個埠不一樣,構成跨域請求的條件。獲取資料:獲取資料的埠為9090請求資料:請求資料的埠為80801、先看下直接發起ajax請求會怎麼樣下面是發起請求端的程式碼:<%@ page pageEncoding="utf-8" conte

jsonp(請求)案例

jsonp案例: 前端: <script type="text/javascript"> function getMatchCountry(){ var key = $.trim($(".global_search_input").v

輕鬆搞定JSONP請求

一、同源策略 要理解跨域,先要了解一下“同源策略”。所謂同源是指,域名,協議,埠相同。所謂“同源策略“,簡單的說就是基於安全考慮,當前域不能訪問其他域的東西。 一些常見的是否同源示例可參照下表: 我通過如下程式碼去訪問該資料: <!

jsonp請求詳解

原文連結:連結 跨域的安全限制都是對瀏覽器端來說的,伺服器端是不存在跨域安全限制的。 瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。 如果協議,埠和主機對於兩個頁面是相同的,則兩個頁面具有相同的源,否則就是不同源的。 如果要在js裡發起跨