原生javascript的ajax請求及後臺PHP響應操作示例
阿新 • • 發佈:2020-02-25
本文例項講述了原生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、建立物件
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相關內容感興趣的讀者可檢視本站專題:《JavaScript中ajax操作技巧總結》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。