PHP-PHP与AJAX
PHP与AJAX
一、传统Web应用–重新加载整个页面 - 不友好
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AJAX Example</title>
</head>
<body>
<form action="">
学号：<input type="text" name="XH" size="12">
课程名：<input type="text" name="KCM" size="12">
<input type="submit" value="查询" name="bt1"><br>
成绩：<input type="text" name="CJ" size="12" id="CJ">
</form>
<?php
if(isset($_GET['bt1'])){
$XH=$_GET['XH']; //取得XH的值
$KCM=$_GET['KCM']; //取得KCM的值
$conn=mysqli_connect("localhost","root",""); //连接MySQL服务器
mysqli_select_db($conn, "PXSCJ"); //选择PXSCJ数据库
mysqli_query($conn, "SET NAMES utf8mb4"); //将MySQL字符集设为gb2312
$sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
$result=mysqli_query($conn, $sql); //执行SQL语句$sql
$row=mysqli_fetch_array($result);
if($row)
echo "<script> document.getElementById('CJ').value = $row[0]; </script>" ; //嵌入JS在'CJ'输出成绩
else
echo "<script> document.getElementById('CJ').value= '".'无此成绩'."' ; </script>" ;
}
?>
</body>
</html>
点击查询按钮后页面会闪一下——不友好。
二、使用GET方式实现一个简单的服务器请求，通过输入学生学号和课程名，查看学生的成绩-- GET方式的PHP与AJAX交互
- SY10_2_main.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Example</title>
<script>
function GetXmlHttpObject(){
//不同的浏览器使用不同的方法
var XMLHttp=null; //来创建XMLHttpRequest对象
try {
XMLHttp=new XMLHttpRequest();
} //NetScape等浏览器
catch(e){
try {
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP");
} //IE6以上版本浏览器
catch(e){
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return XMLHttp;
}
function cj_query(){
XMLHttp=GetXmlHttpObject();
//调用函数GetXmlHttpObject()初始化XMLHttpRequest
var XH=document.getElementById("XH").value;
//getElementById()返回指定ID的第一个对象的引用
var KCM=document.getElementById("KCM").value;
var url="SY10_2_process.php"; //服务器端在SY10_2_process.php中处理
url=url+"?XH="+XH+"&KCM="+KCM; //url地址-以GET方式传递
url=url+"&sid="+Math.random();
//添加一个随机数，以防服务器使用缓存的文件
XMLHttp.open("GET", url, true);
//以GET方式通过给定的url打开XMLHTTP对象
XMLHttp.send(null); //向服务器发送HTTP请求-请求内容为空(参数已在url中)
XMLHttp.onreadystatechange = function(){
//定义响应处理函数--JS即时定义函数的方法
if(XMLHttp.readyState==4&&XMLHttp.status==200){
//readyState为4--已经传回了所以
document.getElementById("CJ").value=XMLHttp.responseText;
//信息-可以开始处理--更新页面了
}
//innerHTML属性--获取对象的内容
}
//或向对象插入内容
}
//传回的信息--当字符串使用
</script>
</head>
<body>
<form action="">
学号：<input type="text" name="XH" size="12" id="XH">
课程名：<input type="text" name="KCM" size="12" id="KCM">
<input type="button" value="查询" onclick="cj_query()"><br>
<!-- //单击"查询"按钮 调用cj_query函数 -->
成绩：<input type="text" name="CJ" size="12" id="CJ">
</form>
</body>
</html>
- SY10_2_process.php:
<?php
$XH=$_GET['XH']; //取得XH的值
$KCM=$_GET['KCM']; //取得KCM的值-不会出现编码(乱码)问题
header('Content-Type:text/html;charset=utf-8'); //发送header-将编码设为gb2312
$conn=mysqli_connect("localhost","root",""); //连接MySQL服务器
mysqli_select_db($conn, "PXSCJ"); //选择PXSCJ数据库
mysqli_query($conn, "set names utf8mb4"); //将mysql字符集设为gb2312
$sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
$result=mysqli_query($conn, $sql);
$row=mysqli_fetch_array($result); //从结果集中逐行获取记录
if($row)
echo $row['成绩']; //输出课程成绩到请求端
else
echo "无此成绩";
?>
点击查询按钮，页面不会有刷新感——友好。
三、使用POST方式实现第二题-- POST方式的PHP与AJAX交互
- SY10_3_main_post.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>AJAX Example</title>
<script>
function GetXmlHttpObject(){
//不同的浏览器使用不同的方法
var XMLHttp=null; //来创建XMLHttpRequest对象
try {
XMLHttp=new XMLHttpRequest();
}
//NetScape等浏览器
catch(e){
try {
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
//IE6以上版本浏览器
catch(e){
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttp;
}
function cj_query(){
XMLHttp=GetXmlHttpObject();
//调用函数GetXmlHttpObject()初始化XMLHttpRequest
var XH=document.getElementById("XH").value;
//getElementById()返回指定ID的第一个对象的引用
var KCM=document.getElementById("KCM").value;
var url="SY10_3_process_post.php";
//服务器端在SY10_3_process_post.php中处理
var poststr="XH="+XH+"&KCM="+KCM; //要传的参数-以post方式传递
XMLHttp.open("POST", url, true);
//以POST方式通过给定的url打开XMLHTTP对象
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置头信息
XMLHttp.send(poststr); //向服务器发送HTTP请求(内容-参数)
XMLHttp.onreadystatechange = function(){
//定义响应处理函数--JS即时定义函数的方法
if(XMLHttp.readyState==4&&XMLHttp.status==200){
//readyState为4--已经传回了所以
document.getElementById("CJ").value=XMLHttp.responseText;
//信息-可以开始处理--更新页面了
}
//innerHTML属性--获取对象的内容
}
//或向对象插入内容
}
//XMLHttp.responseText--传回的信息--当字符串使用
</script>
</head>
<body>
<form action="">
学号：<input type="text" name="XH" size="12" id="XH">
课程名：<input type="text" name="KCM" size="12" id="KCM">
<input type="button" value="查询" onclick="cj_query();"><br>
成绩：<input type="text" name="CJ" size="12" id="CJ">
</form>
</body>
</html>
- SY10_3_process_post.php:
<?php
$XH=$_POST['XH']; //取得XH的值
//$KCM=$_POST['KCM']; //取得KCM的值-会出现编码(乱码)问题
$KCM=$_POST['KCM']; //将UTF-8转换成gb2312字符集
header('Content-Type:text/html;charset=utf-8'); //发送header-将编码设为gb2312
$conn=mysqli_connect("localhost","root",""); //连接MySQL服务器
mysqli_select_db($conn, "PXSCJ"); //选择PXSCJ数据库
mysqli_query($conn, "SET NAMES utf8mb4"); //将字符集设为gb2312
$sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
$result=mysqli_query($conn, $sql); //执行SQL语句$sql
$row=mysqli_fetch_array($result);
if($row)
echo $row['成绩']; //输出课程成绩到请求端
else
echo "无此成绩";
?>
点击查询按钮，页面不会有刷新感。
四、要添加一个学生的信息，用户输入学号，使用无刷新技术判断学号是否存在并输出提示
- SY10_4_main.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Example2</title>
<script>
function GetXmlHttpObject() {
var XMLHttp=null;
try{
XMLHttp=new XMLHttpRequest();
}
catch(e){
try{
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttp;
}
function run(){
XMLHttp=GetXmlHttpObject();
var XH=document.getElementById("XH").value; //得到“学号”文本框中输入的值
var XM=document.getElementById("XM").value; //得到“姓名”文本框中输入的值
var url="SY10_4_process.php"; //服务器端在SY10_4_process.php中处理
var poststr="XH="+XH+"&XM="+XM; //url地址，以POST方式传递
XMLHttp.open("POST",url,true); //以POST方式打开XMLHTTP对象
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置头信息
XMLHttp.send(poststr); //向服务器发送HTTP请求(内容-参数)
XMLHttp.onreadystatechange = function(){
//定义响应处理函数
if(XMLHttp.readyState==4&&XMLHttp.status==200){
if(XH==""){
window.alert("学号未填"); }
else{
if(XMLHttp.responseText == "1"){
document.getElementById("txthint").innerHTML="学号已存在";
}
else if(XMLHttp.responseText == "0"){
document.getElementById("txthint").innerHTML="学号未被使用";
}
}
}
}
}
</script>
</head>
<body>
<form>
<table bgcolor="#CCCCCC" width="280" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="90">学号:</td>
<td><input type="text" name="XH" id="XH" size="15">
<input type="button" name="select" value="检测" onclick="run();"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="90">姓名:</td>
<td><input name="XM" type="text" size="15" id="XM"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="XB" value="1">男<input type="radio" name="XB" value="0">女</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" name="cmdINSERT" value="添加"></td>
</tr>
</table>
</form>
<font color="red">
<div id="txthint" align="center"></div>
</font> <!-- 设置id为"txthint"的div标记，用于显示返回信息 -->
</body>
</html>
- SY10_4_process.php:
<?php
$XH=$_POST['XH'];
$XM=$_POST['XM'];
header('Content-Type:text/html;charset=utf-8');
//发送header-将浏览器编码设为gb2312
$conn=mysqli_connect("localhost","root",""); //连接MySQL服务器
mysqli_select_db($conn, "PXSCJ"); //选择PXSCJ数据库
mysqli_query($conn, "set names utf8mb4"); //将mysql字符集设为gb2312
$sql="select * from XSB where 学号='$XH'"; //查询语句
$result=mysqli_query($conn, $sql);
$row=mysqli_fetch_array($result); //从结果集中逐行获取记录
if($row)
echo "1";
else
echo "0";
?>
点击检测，不会有页面的属性感，会直接提示相应的结果。
创作不易，喜欢的话加个关注点个赞，蟹蟹蟹蟹! 顺祝大家中秋节快乐，阖家幸福，万事如意！
查看6道真题和解析