時(shí)間：2023-05-23 17:18:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-23 17:18:02 來源：網(wǎng)站運(yùn)營
小白7天入門PHP Web開發(fā) - Day 5 Ajax實(shí)現(xiàn)前后端分離交互：《小白7天入門PHP Web開發(fā)》系列文章，面向單純善良的完全不懂Web開發(fā)編程的入門速成課程，小白們?nèi)绻信d趣可以研讀此系列文章，也可以連線提問。各路大神有何指教還請(qǐng)指點(diǎn)一二。希望各路大神手下留情，注意維護(hù)自己的身份和形象。拜謝各位。上一篇文章 我們了解PHP的基礎(chǔ)語法、PHP如何和前端表單交互、PHP的類和對(duì)象、函數(shù)等知識(shí)，希望你能掌握簡(jiǎn)單的PHP前后端交互、理解類和函數(shù)封裝。這節(jié)我們繼續(xù)上節(jié)課講到的成績轉(zhuǎn)評(píng)級(jí)的案例，講解JQuery、Ajax的使用實(shí)現(xiàn)前后端分離以及與PHP的交互，讓用戶體驗(yàn)上更好。
在線咨詢
<!-- score.html --><!-- 使用 localhost/score.html 訪問或直接用瀏覽器打開文件 --><!-- score.html文件應(yīng)與后續(xù).php文件在同一個(gè)目錄下 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>成績轉(zhuǎn)評(píng)級(jí)</title> <style type="text/css"> /*通用樣式*/ * { font-size: 14px; margin: 0; padding: 0; } /*說明部分樣式*/ .explain { background-color: #f4f4f4; margin-top: 100px; padding: 20px 0px; } .block { text-align: left; width: 400px; margin: 0 auto; } .block ul { list-style: none; } /*表單部分樣式*/ .form { width: 400px; margin: 0 auto; margin-top: 20px; } .form input, .form button { height: 36px; box-sizing: border-box; margin-top: 10px; padding: 5px 10px; } .form input { width: 100%; } .form button { width: 100px; } </style></head><body> <div class="explain"> <div class="block"> <ul> <li>1、 學(xué)生成績90分（含）以上，評(píng)級(jí)為A</li> <li>2、 學(xué)生成績?cè)?0分（含）以上，90分以下，評(píng)級(jí)為B</li> <li>3、 學(xué)生成績?cè)?0分（含）以上，80分以下，評(píng)級(jí)為C</li> <li>4、 學(xué)生成績?cè)?0分以下，評(píng)級(jí)為D</li> </ul> </div> </div> <div class="form"> <form action="apis/scorelevel.php" method="get" accept-charset="utf-8" target="_blank" onsubmit="return checkform()"> <input type="text" name="study_name" value="" placeholder="請(qǐng)輸入學(xué)生姓名"> <input type="text" name="study_score" value="" placeholder="請(qǐng)輸入學(xué)生成績"> <br> <button type="submit">檢測(cè)評(píng)級(jí)</button> </form> </div> <script> function checkform() { var study_name = document.getElementsByName('study_name')[0].value; var study_score = document.getElementsByName('study_score')[0].value; if ( !(study_name && study_score) ) { alert('學(xué)生姓名和學(xué)生成績不能為空'); return false; } } </script></body></html><?php/** * apis/scorelevel.php * 我們以 “用戶輸入學(xué)生成績，根據(jù)學(xué)生成績對(duì)學(xué)生評(píng)級(jí)并輸出” 的功能需求來做示例 * 需求的基本內(nèi)容： * 學(xué)生成績90分（含）以上，評(píng)級(jí)為A * 學(xué)生成績?cè)?0分（含）以上，90分以下，評(píng)級(jí)為B * 學(xué)生成績?cè)?0分（含）以上，80分以下，評(píng)級(jí)為C * 學(xué)生成績?cè)?0分以下，評(píng)級(jí)為D */// 首先考慮，成績從哪里來？用戶輸入提交過來的# 獲取用戶提交的學(xué)生名字和成績$study_name = isset($_GET['study_name']) ? $_GET['study_name'] : '';$study_score = isset($_GET['study_score']) ? $_GET['study_score'] : '';// 初始化評(píng)級(jí)$level = '未知';$level_label = '未知';// 檢測(cè)姓名和分?jǐn)?shù)是否為空if ( $study_name == '' || $study_score == '' ) { echo '學(xué)生姓名和學(xué)生成績未知，請(qǐng)檢查提交的數(shù)據(jù)是否為空'; die;}// 根據(jù)分?jǐn)?shù)給學(xué)生評(píng)級(jí)if ( $study_score >= 90 ) { $level = 'A';} elseif ( $study_score >= 80 && $study_score < 90 ) { $level = 'B';} elseif ( $study_score >= 60 && $study_score < 80 ) { $level = 'C';} elseif ( $study_score < 60 ) { $level = 'D';} else { $level = '未知';}switch ( $level ) { case 'A': $level_label = '優(yōu)秀'; break; case 'B': $level_label = '良好'; break; case 'C': $level_label = '及格'; break; case 'D': $level_label = '差'; break;}echo '學(xué)生 '.$study_name.' 的成績?yōu)?'. $study_score .'，評(píng)級(jí)為：'.$level.'（'. $level_label .'）';die;1、我們分解一下這個(gè)交互過程<div class="form"> <form action="apis/scorelevel.php" method="get" accept-charset="utf-8" target="_blank" onsubmit="return checkform()"> <input type="text" name="study_name" value="" placeholder="請(qǐng)輸入學(xué)生姓名"> <input type="text" name="study_score" value="" placeholder="請(qǐng)輸入學(xué)生成績"> <br> <button type="submit">檢測(cè)評(píng)級(jí)</button> </form></div>現(xiàn)在有一個(gè)問題是我們每次提交表單都會(huì)出現(xiàn)一個(gè)新的瀏覽器標(biāo)簽頁面（如果沒試過的話盡快嘗試一下運(yùn)行起來），有沒有感覺有點(diǎn)不爽，點(diǎn)一次打開個(gè)新頁面，然后下一個(gè)成績又得去切換再填一次再點(diǎn)一次“檢測(cè)評(píng)級(jí)”。好在，我們可以很簡(jiǎn)單的解決這個(gè)問題，就是不打開新的頁面，在當(dāng)前頁面提交表單。只需要對(duì)html代碼稍微修改一下即可<form action="apis/scorelevel.php" method="get" accept-charset="utf-8" target="_blank" onsubmit="return checkform()"><!-- 修改為如下代碼 --><form action="apis/scorelevel.php" method="get" accept-charset="utf-8" target="_self" onsubmit="return checkform()">實(shí)際上就是把表單的屬性 target 的值 _blank 改成了 _self，可以理解為前者是打開新頁面然后提交表單，后者是在當(dāng)前頁面提交表單，后者其實(shí)是可以省略的，也就是把整個(gè) target 去掉，跟 target="_self" 效果是一樣的。大家試試就很容易知道這個(gè)結(jié)果了。<html><!-- 這里是HTML代碼，和上面的頁面一樣的部分就不寫出來了 --><!-- 只修改了表單屬性action為空表示提交到當(dāng)前頁面（他自己） --> <form action="" method="get" accept-charset="utf-8" onsubmit="return checkform()"> <!-- 表單內(nèi)容代碼跟上面的一樣 --> </form></html><?php // 1、把php代碼的首尾標(biāo)簽協(xié)商 // 2、把scorelevel.php里面的php代碼直接拷貝（復(fù)制粘貼）到這里來就可以了 // some php code?>然后我們用瀏覽器打開鏈接 localhost/day05/scoresubmit.phpAjax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。我們知道Javascript可以直接實(shí)現(xiàn)很多功能，包括了ajax，但是使用起來并沒有那么方便。所以大佬們就做了一個(gè)叫 JQuery（JQ） 的js代碼庫（放很多優(yōu)化過的js代碼的地方），我們可以直接使用這個(gè)庫，就可以完成很多js原生寫起來比較復(fù)雜或代碼量比較多的功能了，of course~包括我們的 ajax。
Ajax = 異步 JavaScript 和 XML 或者是 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）。
Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面。
以上引用自百度百科 ajax（Ajax 開發(fā)）_百度百科
<html><!-- html code --><script src="local/jquery.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></body></html>2、使用JQuery封裝好的ajax<html><!-- html code --><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>// js 代碼</script></body></html>使用ajax可以達(dá)到不刷新整個(gè)網(wǎng)頁就能跟后端交互并更新頁面內(nèi)容。那么怎么使用呢？還記得我們 score.html 頁面上有寫過的檢查表單的js代碼嗎？ <script> function checkform() { var study_name = document.getElementsByName('study_name')[0].value; var study_score = document.getElementsByName('study_score')[0].value; if ( !(study_name && study_score) ) { alert('學(xué)生姓名和學(xué)生成績不能為空'); return false; } } </script>當(dāng)姓名和成績都有的時(shí)候我們就提交表單，現(xiàn)在我們要用jq的ajax來提交表單。需要改一下代碼咯。 <div class="form"> </div> <div class="explain"> <div class="block notice">請(qǐng)輸入學(xué)生姓名和成績，點(diǎn)擊檢測(cè)評(píng)級(jí)進(jìn)行成績?cè)u(píng)級(jí)</div> </div>得到頁面如下<form action="javascript:void(0);" method="get" accept-charset="utf-8" onsubmit="return submitform()">然后修改js代碼，使用jq的ajax來處理表單提交<script> function submitform() { // 使用jq選擇器，獲取頁面標(biāo)簽dom元素的值 var study_name = $('input[name=study_name]').val() var study_score = $('input[name=study_score]').val() // 校驗(yàn)是否已經(jīng)填寫姓名和成績，沒有的話就提示信息 if ( !(study_name && study_score) ) { // 修改提示信息出的文本顏色為紅色 $('.notice').css({color:"red"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text('學(xué)生姓名和學(xué)生成績不能為空') // 設(shè)置提示3秒后恢復(fù)到頁面原來提示的文字和樣式 setTimeout(function(){ // 修改提示信息出的文本顏色為黑色 $('.notice').css({color:"black"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text('請(qǐng)輸入學(xué)生姓名和成績，點(diǎn)擊檢測(cè)評(píng)級(jí)進(jìn)行成績?cè)u(píng)級(jí)') }, 3000) return false } // 如果已經(jīng)填寫了我們就通過ajax提交表單內(nèi)容 $.ajax({ url: 'http://localhost/day05/apis/scorelevel.php', // 后端php地址 data: $('form').serialize(), // 提交的數(shù)據(jù)，表單直接序列化 dataType: 'text', // 返回的數(shù)據(jù)類型，我們這里直接返回文本就是text了 success: function(responseText) { // 請(qǐng)求成功的時(shí)候進(jìn)行處理 // 修改提示信息出的文本顏色為綠色 $('.notice').css({color:"green"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text(responseText) }, error: function(err){ // 請(qǐng)求失敗的時(shí)候進(jìn)行的處理 console.log(err) } }) }</script>以上就是ajax請(qǐng)求后端的交互代碼，我們的主要重點(diǎn)放在 $.ajax() 上，其他的內(nèi)容都只是為了頁面更好看。$.ajax() 是jq封裝的異步請(qǐng)求數(shù)據(jù)的方法，她需要一個(gè)json類型的數(shù)據(jù)做參數(shù)，其中只有url，請(qǐng)求地址是必須的，json數(shù)據(jù)的格式是{ key1: value1, key2: value2}你發(fā)現(xiàn)我們傳了請(qǐng)求地址url，提交給后端的數(shù)據(jù)data，后端返回的數(shù)據(jù)格式dataType這三個(gè)參數(shù)，同時(shí)也寫了兩個(gè)回調(diào)函數(shù)（就是請(qǐng)求結(jié)束時(shí)根據(jù)成功還是失敗來執(zhí)行對(duì)應(yīng)的操作），這兩個(gè)函數(shù)success和error都是jq默認(rèn)帶的回調(diào)函數(shù)，我們只需要在里面做相關(guān)操作即可。當(dāng)你把以上代碼都寫完以后，請(qǐng)刷新頁面，重新去提交姓名和成績，會(huì)得到如下不會(huì)刷新頁面的結(jié)果。關(guān)鍵詞：實(shí)現(xiàn),交互,分離,入門
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
