<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax封裝：傳物件并封裝</title>
</head>
<body>
<button id="get">get</button>
<button id="post">POST</button>
<script>
var get = document.getElementById("get");
var post = document.getElementById("post");
get.onclick = function () {
$.ajax({
type: "get",
url: "ajaxfz/get.php",
data:{
username:"1515",
password:"4155451"
},
success:function (info) {
console.log(info);
}
})
};
post.onclick = function () {
$.ajax({
type: "POST",
url: "ajaxfz/post1.php",
dataType: "json",
parmas: "username=13&password=54321",
success: function (info) {
console.log(info);
},
error: function () {
console.log("服務器炸了");
}
})
};
/* 引數分析
type:get|post,默認值：get
url:必須傳，get請求需要把引數拼接在地址欄中
async:是否異步，默認true
data:請求的引數，是一個物件，需要轉換成字串格式（例子：username=12&password=54321）
params:請求的引數
dataType：回應的資料型別 xml/json/text
success:成功后的(回呼)函式
error:失敗后的回呼函式
*/
var $ = {
ajax: function (options) {//options是一個物件
//如果params沒有傳物件或者傳的不是一個引數，直接回傳
if (!options || typeof options != "object") {
return;
}
//如果傳的型別是post按post處理，如果不是則按get處理，默認為get
var type = options.type === "POST" ? "POST" : "get";
var url = options.url;
if (!url) {
return;
};
//如果傳的不是false,則按true處理，默認為true
var async = options.async === false ? false : true;
var data = options.data;
//parse把data轉換成params字串
//傳遞的引數
var params = $.parse(data);
//回應的資料型別
var dataType = options.dataType;
//成功后要做的事
var success = options.success;
//失敗后要做的事
var error = options.error;
var xhr = new XMLHttpRequest();
//1.請求行，get請求需要在地址欄拼接引數
if (type === "get") {
url = url + "?" + params;
params = null;//如果引數已經拼接在地址欄，引數設為null
}
xhr.open(type, url, async);
//2.請求頭，post請求需要設定請求頭
if (type === "POST") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
}
//3.psot請求需要傳引數，get請求傳null(空)
xhr.send(params);
//添加監聽，處理回應
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//回應成功
//如果success存在（true）就執行success()，不存在（false）就不執行success()
//根據回應的型別的不同，需要做不同的資料處理 xml/json/text
var result = null;
if (dataType === "xml") {
result = xhr.responseXML;
} else if (dataType === "json") {
result = JSON.parse(xhr.responseText);
//將后臺回應回來的文本轉換成json陣列或物件
}else if(dataType === "text"){
result = xhr.responseText;
}
success && success(result);
} else {
//回應失敗 同上
error && error(xhr.responseText);
}
}
}
},
parse: function (obj) {
//作用：將一個物件轉換成（username=12&password=54321）字串
if (!obj || typeof obj != "object") {
return null;
}
var arr = [];
//遍歷物件
for (var k in obj) {
arr.push(k + "=" + obj[k]);//k為鍵，obj[K]為值
}
return arr.join("&");//在字串之間插入&
}
}
</script>
</body>
</html>
<?php
$username = $_GET['username'];
$password = $_GET['password'];
echo "get請求：" . "賬號：".$username .",密碼：". $password;
?>
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
已經解決了把null換成xhr.responseText就可以啦，
uj5u.com熱心網友回復：
$.ajaxSetup({ async: false }); 頭部加這句試試轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/9131.html
標籤：Ajax
上一篇：自動給Access資料庫添加記錄
下一篇：微信小程式點擊跳轉到錨點怎么實作