溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用原生javascript怎么實現一個ajax請求，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="t"> <tr> <td>學號:</td> <td><input type="text" id="stuid" /></td> </tr> <tr> <td>密碼:</td> <td><input type="password" id="stupass" /></td> </tr> <tr> <td colspan="2"> <input id="btnLogin" type="button" value="登錄" /> </td> </tr> </table> </body> </html>
ajax的一般步驟
1、創建對象
let xhr = new XMLHttpRequest();
2、設置請求參數
xhr.open(請求方式,請求地址，是否異步);
3、設置回調函數
xhr.onreadystatechange = function () {
// 5、接收響應
alert(xhr.responseText);
}4、發送
xhr.send();
<script type="text/javascript">
window.onload = function(){
$("#btnLogin").onclick = function(){
//1、創建對象
let xhr = new XMLHttpRequest();
//2、設置請求參數
xhr.open('post','loginCheckajax.php',true);
//3、設置回調函數
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
if(xhr.responseText=='1'){
//存cookie
saveCookie("username",$("#stuid").value,7);
//挑到首頁
location.href="index.html" rel="external nofollow" ;
}else{
alert("登錄失敗！");
}
}
}
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4、發送
xhr.send("stuid="+$("#stuid").value+"&stupass="+$("#stupass").value);
}
}
function $(str){ //id class tagname
if(str.charAt(0) == "#"){
return document.getElementById(str.substring(1));
}else if(str.charAt(0) == "."){
return document.getElementsByClassName(str.substring(1));
}else{
return document.getElementsByTagName(str);
}
}
</script>php文件
<?php
header("Content-type:text/html;charset=utf-8");
//一、獲取用戶的輸入
$stuid = $_POST['stuid'];
$stupass = $_POST['stupass'];
//二、處理
//1、建立連接（搭橋）
$conn = mysql_connect('localhost','root','root');
if(!$conn){
die("連接失敗");
}
//2、選擇數據庫（選擇目的地）
mysql_select_db("mydb1809",$conn);
//3、執行SQL語句（傳輸數據）
$sqlstr="select * from student where stuid='$stuid' and stupass='$stupass'";
$result = mysql_query($sqlstr,$conn);//結果是個表格
//4、關閉數據庫（過河拆橋）
mysql_close($conn);
//三、響應
if(mysql_num_rows($result)>0){
echo "1";
}else{
echo "0";
}
?><!-- 保存cookie -->
<script>
// saveCookie
//保存cookie
//參數：
//鍵
//值
//有效期（單位是：天）
//返回值：無
function saveCookie(key,value,dayCount){
var d = new Date();
d.setDate(d.getDate()+dayCount);
document.cookie = key+'='+escape(value)+';expires='+d.toGMTString();
}
//獲取cookie(根據鍵獲取值)
//參數:
//鍵
//返回值：值
function getCookie(key){
var str = unescape(document.cookie);//username=jzm; userpass=1236667
//1、分割成數組（; ）
var arr = str.split('; ');//['username=jzm','userpass=1236667']
//2、從數組查找key=;
for(var i in arr){
if(arr[i].indexOf(key+'=')==0){
return arr[i].split('=')[1];
}
}
return null;
}
//刪除cookie
//參數：
//鍵
//返回值：無
function removeCookie(key){
saveCookie(key,'',-1);
}
</script>以上就是使用原生javascript怎么實現一個ajax請求，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
