溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在Vue中利用axios實現一個options請求，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
前端代碼
<!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>
<!-- 導入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- POST 請求 -->
<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;
//不處理的數據對象
let data = {
username: username,
password: password
};
console.log(data);//{username: "admin", password: "123456"}
//阻止submit默認行為：表單提交刷新頁面
event.preventDefault();
//提交請求獲取響應數據
axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
</script>
</html>php接口代碼
<?php
// 制定允許其他域名訪問
header("Access-Control-Allow-Origin:*");
// 允許的響應類型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應頭設置
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
// 獲取form表單值
$username = $_POST['username'];
$password = $_POST['password'];
// 判斷form表單中key
if(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);
}
// 將錯誤信息(數組)轉換成json類型,返回前端
echo(json_encode($result));
?>結果：運行失敗，無法獲取響應數據
2.解決：
方法Ⅰ.引入qs模塊處理數據:修改上面的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> <!-- 導入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 導入qs --> <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script> </head> <body> <!-- POST 請求 --> <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處理數據對象 //qs的原理：就是將對象轉變成字符串拼接到url上再發post請求 let data = Qs.stringify({ username: username, password: password }); console.log(data);//username=admin&password=123456 //阻止submit默認行為：表單提交刷新頁面 event.preventDefault(); //提交請求獲取響應數據 axios.post("http://www.test.com/day05/jiekou.php", data).then(res => { console.log(res); }).catch(err => { console.log(err); }) } </script> </html>
方法Ⅱ.后端開放options請求跨域，并用對應的方法獲取options提交的復雜數據
<?php
// 制定允許其他域名訪問
header("Access-Control-Allow-Origin:*");
// 響應類型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應頭設置
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
//如果是options請求，就結束執行下面語句
if($_SERVER['REQUEST_METHOD']=='OPTIONS'){
//exit是用來結束程序執行的,如果參數是字符串，PHP將會直接把字符串輸出，
//如果參數是整型（范圍是0-254），那個參數將會被作為結束狀態使用。
exit('options類型的請求，結束');
}
//option請求無法用常規方法($_GET, $_POST, $_REQUEST)獲取請求參數
$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表單中key
if(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);
}
// 將錯誤信息(數組)轉換成json類型,返回前端
echo(json_encode($result));
?>小結：：
Ⅰ.個人是比較傾向于由后端來解決（前端還要引入qs插件，沒什么必要）
Ⅱ.在vue里面使用qs的步驟
?qs是一個npm倉庫所管理的包,可通過npm install qs命令進行安裝.
qs.parse()將URL解析成對象的形式
qs.stringify()將對象 序列化成URL的形式，以&進行拼接（我們大都用到這個）
?在全局main.js里引入qs并配置方法到原型上
import qs from 'qs'; Vue.prototype.$qs = qs;
上述內容就是怎么在Vue中利用axios實現一個options請求，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
