原生javascript的ajax請求及后臺PHP響應操作示例
更新時間：2020年02月24日 08:51:02 作者：巴啦啦小能量
這篇文章主要介紹了原生javascript的ajax請求及后臺PHP響應操作,結合示例形式分析了JavaScript前臺ajax請求的原理、調用、后臺PHP響應請求及cookie保存相關操作技巧,需要的朋友可以參考下
本文實例講述了原生javascript的ajax請求及后臺PHP響應操作。分享給大家供大家參考，具體如下：
<!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、創(chuàng)建對象
let xhr = new XMLHttpRequest();
2、設置請求參數
xhr.open(請求方式,請求地址，是否異步);
3、設置回調函數
xhr.onreadystatechange = function () {
// 5、接收響應
alert(xhr.responseText);
}
4、發(fā)送
xhr.send();
<script type="text/javascript">
window.onload = function(){
$("#btnLogin").onclick = function(){
//1、創(chuàng)建對象
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、發(fā)送
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、執(zhí)行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相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了JavaScript事件學習小結(二)js事件處理程序的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本文詳細介紹了html嵌入javascript代碼的三種主要方式：腳本塊的方式、引入外部獨立的.js文件、事件句柄是以html標簽的屬性存在的，有感興趣了解的同學可以借鑒閱讀2023-03-03
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。2013-08-08
下面的代碼注意實現先判斷l(xiāng)i是否有樣式，如果沒有，就添加一個樣式，原理呢，就是批量檢測li的className屬性2008-09-09
webpack 是一個現代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關于webpack打包進度展示以及美化的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
javascript動態(tài)創(chuàng)建鏈接的方法
這篇文章主要介紹了javascript動態(tài)創(chuàng)建鏈接的方法,涉及javascript動態(tài)操作頁面元素的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了bootstrap表格內容過長時用省略號表示的解決方法,需要的朋友可以參考下2017-11-11
這篇文章主要為大家介紹了開發(fā)一個微信小程序實戰(zhàn)快速入門教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要為大家詳細介紹了使用Javascript在HTML中顯示實時時間，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript編碼風格精選指南(編寫可維護的代碼規(guī)范)
javascript編碼規(guī)范能夠增強代碼的簡潔性、可讀性、可擴展性,項目做到后期,每修改一次,所耗費的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級原有系統功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則！2024-06-06