以下代碼如果需要在你本地跑起來(lái)：
Ⅰ.需要apache服務(wù)，并把php代碼丟進(jìn)去指定位置
Ⅱ.將下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip
1.從一段簡(jiǎn)易代碼說(shuō)起
前端代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 導(dǎo)入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body> <!-- POST 請(qǐng)求 --> <form method="post"> <p>用戶名:<input id="username" type="text" name="username" value="admin"> </p> <br /> <p>密 碼:<input id="password" type="text" name="password" value="123456"> </p> <br /> <p><input id="btn" type="submit" value="登錄" /></p> </form></body><script> document.getElementById("btn").onclick = function () { //獲取用戶輸入的登錄信息 let username = document.getElementById('username').value; let password = document.getElementById('password').value; //不處理的數(shù)據(jù)對(duì)象 let data = { username: username, password: password }; console.log(data);//{username: "admin", password: "123456"} //阻止submit默認(rèn)行為：表單提交刷新頁(yè)面 event.preventDefault(); //提交請(qǐng)求獲取響應(yīng)數(shù)據(jù) axios.post("http://www.test.com/day05/jiekou.php", data).then(res => { console.log(res); }).catch(err => { console.log(err); }) }</script></html>php接口代碼
<?php// 制定允許其他域名訪問(wèn)header("Access-Control-Allow-Origin:*");// 允許的響應(yīng)類型header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');// 響應(yīng)頭設(shè)置header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");// 獲取form表單值$username = $_POST['username'];$password = $_POST['password'];// 判斷form表單中keyif(isset($_POST['username']) && isset($_POST['password'])){ // 判斷username和password if($username == "admin" && $password == "123456"){ $result = array("success" => 1, "code" => 101, "data" => array("username" => $username, "password" => $password)); }else{ $result = array("success" => 0, "code" => 103, "data" => null); } }else{ $result = array("success" => 0, "code" => 100, "data" => null);}// 將錯(cuò)誤信息(數(shù)組)轉(zhuǎn)換成json類型,返回前端echo(json_encode($result));?>結(jié)果：運(yùn)行失敗，無(wú)法獲取響應(yīng)數(shù)據(jù)
2.解決：
方法Ⅰ.引入qs模塊處理數(shù)據(jù):修改上面的html代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 導(dǎo)入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 導(dǎo)入qs --> <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script></head><body> <!-- POST 請(qǐng)求 --> <form method="post"> <p>用戶名:<input id="username" type="text" name="username" value="admin"> </p> <br /> <p>密 碼:<input id="password" type="text" name="password" value="123456"> </p> <br /> <p><input id="btn" type="submit" value="登錄" /></p> </form></body><script> document.getElementById("btn").onclick = function () { //獲取用戶輸入的登錄信息 let username = document.getElementById('username').value; let password = document.getElementById('password').value; // 用qs處理數(shù)據(jù)對(duì)象 //qs的原理：就是將對(duì)象轉(zhuǎn)變成字符串拼接到url上再發(fā)post請(qǐng)求 let data = Qs.stringify({ username: username, password: password }); console.log(data);//username=admin&password=123456 //阻止submit默認(rèn)行為：表單提交刷新頁(yè)面 event.preventDefault(); //提交請(qǐng)求獲取響應(yīng)數(shù)據(jù) axios.post("http://www.test.com/day05/jiekou.php", data).then(res => { console.log(res); }).catch(err => { console.log(err); }) }</script></html>方法Ⅱ.后端開(kāi)放options請(qǐng)求跨域，并用對(duì)應(yīng)的方法獲取options提交的復(fù)雜數(shù)據(jù)
<?php// 制定允許其他域名訪問(wèn)header("Access-Control-Allow-Origin:*");// 響應(yīng)類型header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');// 響應(yīng)頭設(shè)置header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");//如果是options請(qǐng)求，就結(jié)束執(zhí)行下面語(yǔ)句if($_SERVER['REQUEST_METHOD']=='OPTIONS'){ //exit是用來(lái)結(jié)束程序執(zhí)行的,如果參數(shù)是字符串，PHP將會(huì)直接把字符串輸出， //如果參數(shù)是整型（范圍是0-254），那個(gè)參數(shù)將會(huì)被作為結(jié)束狀態(tài)使用。 exit('options類型的請(qǐng)求，結(jié)束');}//option請(qǐng)求無(wú)法用常規(guī)方法($_GET, $_POST, $_REQUEST)獲取請(qǐng)求參數(shù)$option_data_str = file_get_contents("php://input");$option_data = json_decode($option_data_str,true);$username = isset($option_data['username'])?$option_data['username']:"";$password = isset($option_data['password'])?$option_data['password']:"";// 判斷form表單中keyif(isset($username) && isset($password)){ // 判斷username和password if($username == "admin" && $password == "123456"){ $result = array("success" => 1, "code" => 101, "data" => array("username" => $username, "password" => $password)); }else{ $result = array("success" => 0, "code" => 103, "data" => null); } }else{ $result = array("success" => 0, "code" => 100, "data" => null);}// 將錯(cuò)誤信息(數(shù)組)轉(zhuǎn)換成json類型,返回前端echo(json_encode($result));?>小結(jié)：：
Ⅰ.個(gè)人是比較傾向于由后端來(lái)解決（前端還要引入qs插件，沒(méi)什么必要）
Ⅱ.在vue里面使用qs的步驟
➀qs是一個(gè)npm倉(cāng)庫(kù)所管理的包,可通過(guò)npm install qs命令進(jìn)行安裝.
傳送門[https://www.npmjs.com/package/qs](https://www.npmjs.com/package/qs)
qs.parse()將URL解析成對(duì)象的形式
qs.stringify()將對(duì)象 序列化成URL的形式，以&進(jìn)行拼接（我們大都用到這個(gè)）
➁在全局main.js里引入qs并配置方法到原型上
import qs from 'qs';Vue.prototype.$qs = qs;
在所有的vue實(shí)例組件里都可以直接用this.$qs.stringify(要處理的數(shù)據(jù))，進(jìn)行數(shù)據(jù)轉(zhuǎn)換
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
