时间：2023-05-23 17:18:02 | 来源：网站运营
时间：2023-05-23 17:18:02 来源：网站运营
小白7天入门PHP Web开发 - Day 5 Ajax实现前后端分离交互：《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问。各路大神有何指教还请指点一二。希望各路大神手下留情，注意维护自己的身份和形象。拜谢各位。上一篇文章 我们了解PHP的基础语法、PHP如何和前端表单交互、PHP的类和对象、函数等知识，希望你能掌握简单的PHP前后端交互、理解类和函数封装。这节我们继续上节课讲到的成绩转评级的案例，讲解JQuery、Ajax的使用实现前后端分离以及与PHP的交互，让用户体验上更好。
在线咨询
<!-- score.html --><!-- 使用 localhost/score.html 访问或直接用浏览器打开文件 --><!-- score.html文件应与后续.php文件在同一个目录下 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>成绩转评级</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、 学生成绩90分（含）以上，评级为A</li> <li>2、 学生成绩在80分（含）以上，90分以下，评级为B</li> <li>3、 学生成绩在60分（含）以上，80分以下，评级为C</li> <li>4、 学生成绩在60分以下，评级为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="请输入学生姓名"> <input type="text" name="study_score" value="" placeholder="请输入学生成绩"> <br> <button type="submit">检测评级</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('学生姓名和学生成绩不能为空'); return false; } } </script></body></html><?php/** * apis/scorelevel.php * 我们以 “用户输入学生成绩，根据学生成绩对学生评级并输出” 的功能需求来做示例 * 需求的基本内容： * 学生成绩90分（含）以上，评级为A * 学生成绩在80分（含）以上，90分以下，评级为B * 学生成绩在60分（含）以上，80分以下，评级为C * 学生成绩在60分以下，评级为D */// 首先考虑，成绩从哪里来？用户输入提交过来的# 获取用户提交的学生名字和成绩$study_name = isset($_GET['study_name']) ? $_GET['study_name'] : '';$study_score = isset($_GET['study_score']) ? $_GET['study_score'] : '';// 初始化评级$level = '未知';$level_label = '未知';// 检测姓名和分数是否为空if ( $study_name == '' || $study_score == '' ) { echo '学生姓名和学生成绩未知，请检查提交的数据是否为空'; die;}// 根据分数给学生评级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 = '优秀'; break; case 'B': $level_label = '良好'; break; case 'C': $level_label = '及格'; break; case 'D': $level_label = '差'; break;}echo '学生 '.$study_name.' 的成绩为 '. $study_score .'，评级为：'.$level.'（'. $level_label .'）';die;1、我们分解一下这个交互过程<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="请输入学生姓名"> <input type="text" name="study_score" value="" placeholder="请输入学生成绩"> <br> <button type="submit">检测评级</button> </form></div>现在有一个问题是我们每次提交表单都会出现一个新的浏览器标签页面（如果没试过的话尽快尝试一下运行起来），有没有感觉有点不爽，点一次打开个新页面，然后下一个成绩又得去切换再填一次再点一次“检测评级”。好在，我们可以很简单的解决这个问题，就是不打开新的页面，在当前页面提交表单。只需要对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()">实际上就是把表单的属性 target 的值 _blank 改成了 _self，可以理解为前者是打开新页面然后提交表单，后者是在当前页面提交表单，后者其实是可以省略的，也就是把整个 target 去掉，跟 target="_self" 效果是一样的。大家试试就很容易知道这个结果了。<html><!-- 这里是HTML代码，和上面的页面一样的部分就不写出来了 --><!-- 只修改了表单属性action为空表示提交到当前页面（他自己） --> <form action="" method="get" accept-charset="utf-8" onsubmit="return checkform()"> <!-- 表单内容代码跟上面的一样 --> </form></html><?php // 1、把php代码的首尾标签协商 // 2、把scorelevel.php里面的php代码直接拷贝（复制粘贴）到这里来就可以了 // some php code?>然后我们用浏览器打开链接 localhost/day05/scoresubmit.phpAjax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。我们知道Javascript可以直接实现很多功能，包括了ajax，但是使用起来并没有那么方便。所以大佬们就做了一个叫 JQuery（JQ） 的js代码库（放很多优化过的js代码的地方），我们可以直接使用这个库，就可以完成很多js原生写起来比较复杂或代码量比较多的功能了，of course~包括我们的 ajax。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
以上引用自百度百科 ajax（Ajax 开发）_百度百科
<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可以达到不刷新整个网页就能跟后端交互并更新页面内容。那么怎么使用呢？还记得我们 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('学生姓名和学生成绩不能为空'); return false; } } </script>当姓名和成绩都有的时候我们就提交表单，现在我们要用jq的ajax来提交表单。需要改一下代码咯。 <div class="form"> </div> <div class="explain"> <div class="block notice">请输入学生姓名和成绩，点击检测评级进行成绩评级</div> </div>得到页面如下<form action="javascript:void(0);" method="get" accept-charset="utf-8" onsubmit="return submitform()">然后修改js代码，使用jq的ajax来处理表单提交<script> function submitform() { // 使用jq选择器，获取页面标签dom元素的值 var study_name = $('input[name=study_name]').val() var study_score = $('input[name=study_score]').val() // 校验是否已经填写姓名和成绩，没有的话就提示信息 if ( !(study_name && study_score) ) { // 修改提示信息出的文本颜色为红色 $('.notice').css({color:"red"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text('学生姓名和学生成绩不能为空') // 设置提示3秒后恢复到页面原来提示的文字和样式 setTimeout(function(){ // 修改提示信息出的文本颜色为黑色 $('.notice').css({color:"black"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text('请输入学生姓名和成绩，点击检测评级进行成绩评级') }, 3000) return false } // 如果已经填写了我们就通过ajax提交表单内容 $.ajax({ url: 'http://localhost/day05/apis/scorelevel.php', // 后端php地址 data: $('form').serialize(), // 提交的数据，表单直接序列化 dataType: 'text', // 返回的数据类型，我们这里直接返回文本就是text了 success: function(responseText) { // 请求成功的时候进行处理 // 修改提示信息出的文本颜色为绿色 $('.notice').css({color:"green"}) // 把提示信息以文本text的方式填充到notice div中 $('.notice').text(responseText) }, error: function(err){ // 请求失败的时候进行的处理 console.log(err) } }) }</script>以上就是ajax请求后端的交互代码，我们的主要重点放在 $.ajax() 上，其他的内容都只是为了页面更好看。$.ajax() 是jq封装的异步请求数据的方法，她需要一个json类型的数据做参数，其中只有url，请求地址是必须的，json数据的格式是{ key1: value1, key2: value2}你发现我们传了请求地址url，提交给后端的数据data，后端返回的数据格式dataType这三个参数，同时也写了两个回调函数（就是请求结束时根据成功还是失败来执行对应的操作），这两个函数success和error都是jq默认带的回调函数，我们只需要在里面做相关操作即可。当你把以上代码都写完以后，请刷新页面，重新去提交姓名和成绩，会得到如下不会刷新页面的结果。关键词：实现,交互,分离,入门
