23.4 在PHP中应用Ajax技术的典型应用

23.4 在PHP中应用Ajax技术的典型应用

视频讲解:光盘TMlx23在PHP中应用Ajax技术的典型应用.exe

23.4.1 在PHP中应用Ajax技术检测用户名

【例23.1】本例主要通过Ajax技术实现不刷新页面检测用户名是否被占用。(实例位置:光盘TMsl231)

程序的开发步骤如下:

(1)搭建Ajax开发框架,代码如下:

<script language="javascript"> var http_request = false; function createRequest(url){ //初始化对象并发出XMLHttpRequest请求 http_request = false; if(window.XMLHttpRequest){ //Mozilla等其他浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (! http_request) { alert("不能创建XMLHTTP实例!"); return false; } http_request.onreadystatechange=alertContents; //指定响应方法 //发出HTTP请求 http_request.open("GET", url, true); http_request.send(null); } function alertContents(){ //处理服务器返回的信息 if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert(’您请求的页面发现错误’); } } } </script>

(2)编写JavaScript的自定义函数checkName(),用于检测用户名是否为空,当用户名不为空时,调用createRequest()函数发送请求检测用户名是否存在,代码如下:

<script language="javascript"> function checkName() { var username = form1.username.value; if(username=="") { window.alert("请添写用户名!"); form1.username.focus(); return false; } else { createRequest('checkname.php? username='+username+'&nocache='+new Date().getTime()); } } </script>

在上面的代码中,必须添加清除缓存的代码(加粗的代码部分),否则程序将不能正确检测用户名是否被占用。

(3)在页面的适当位置添加“检测用户名”超链接,在该超链接的onclick事件中调用checkName方法弹出显示检测结果的对话框,关键代码如下:

<a href="#" onClick="checkName(); ">[检测用户名]</a>

(4)编写检测用户名是否唯一的PHP处理页checkname.php,在该页面中使用PHP的echo语句输出检测结果,完整代码如下:

<?php header('Content-type: text/html; charset=GB2312'); //指定发送数据的编码格式为GB2312 $link=mysqli_connect("localhost", "root", "111"); mysqli_select_db($link, "db_database23"); mysqli_query($link, "set names gb2312"); $username=$_GET['username']; $sql=mysqli_query($link, "select * from tb_user where name='".$username."'"); $info=mysqli_fetch_array($sql); if ($info){ echo "很抱歉!用户名[".$username."]已经被注册!"; }else{ echo "祝贺您!用户名[".$username."]没有被注册!"; } ?>

运行本例,在“用户名”文本框中输入“纯净水”,单击“检测用户名”超链接,即可在不刷新页面的情况下弹出“祝贺您!用户名[纯净水]没有被注册!”的提示对话框,如图23.3所示。

图23.3 检测用户名

23.4.2 在PHP中应用Ajax技术实现博客文章类别添加

【例23.2】本例主要通过Ajax技术实现无刷新的博客文章类别添加。(实例位置:光盘TMsl232)

程序的开发步骤如下:

(1)搭建Ajax开发框架,具体代码如下:

<script language="javascript"> var http_request = false; function createRequest(url) { //初始化对象并发出XMLHttpRequest请求 http_request = false; if(window.XMLHttpRequest){ //Mozilla等其他浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (! http_request) { alert("不能创建XMLHTTP实例!"); return false; } http_request.onreadystatechange=alertContents; //指定响应方法 http_request.open("GET", url, true); //发出HTTP请求 http_request.send(null); } function alertContents(){ //处理服务器返回的信息 if (http_request.readyState == 4) { if (http_request.status == 200) { sort id.innerHTML=http request.responseText; //设置sort_id HTML文本替换的元素内容 } else { alert(’您请求的页面发现错误’); } } } </script>

在上面的代码中,要特别注意的是加粗部分的代码,sort_id是显示文章分类信息的单元格id属性,将在本例的步骤(4)中介绍。innerHTML属性声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记,该属性用于指定HTML文本替换元素的内容。

(2)编写JavaScript的自定义函数check_sort()用于检测欲添加的类别名称是否为空,当类别名称文本框不为空时调用createRequest()函数发送请求获取添加类别信息到数据库中,代码如下:

<script language="javascript"> function checksort() { var txt_sort = form1.txt_sort.value; if(txt_sort=="") { window.alert("请填写文章类别!"); //如果文章类别文本框内容为空,弹出提示 form1.txt_sort.focus(); return false; } else { createRequest('checksort.php? txt_sort='+txt_sort); //提交分类信息到数据处理页 } } </script>

(3)在下拉列表中动态输出博客文章的类别信息,这里更重要的是将第一行代码中单元格的id属性设置为sort_id,便于在JavaScript脚本中调用。另外,在“添加分类”图像的onclick事件中调用checksort方法,代码如下:

<td width="14%"valign="baseline"id="sort id"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <select name="select" > <?php $link=mysqli_connect("localhost", "root", "111"); //连接MySQL数据库服务器 mysqli_select_db($link, "db_database23"); //选择数据库文件 mysqli_query($link, "set names gb2312"); //设置数据库编码类型为GB2312 $sql=mysqli_query($link, "select distinct * from tb_sort group by sort"); $result=mysqli_fetch_object($sql); //检索数据表中的信息 do{ header('Content-type: text/html; charset=GB2312'); //指定发送数据的编码格式为GB2312 ?> <option value="<?php echo $result->sort; ?>" selected><?php echo $result->sort; ?></option> <?php }while($result=mysqli_fetch_object($sql)); ?> </select> </td> <td width="20%" height="21" align="right" valign="baseline"> <input name="txt_sort" type="text" id="txt_sort" size="12" style="border:1px #64284A solid; height:21"> </td> <td width="49%" height="21" align="left" valign="baseline"> <img src="images/add.gif"width="67"height="23"onclick="checksort(); "> </td> </tr> </table> </td>

(4)编写添加分类信息到PHP处理页checksort.php,在该页面首先从数据表中获取博客分类信息,然后添加到数据库中,最后显示在下拉列表中,完整代码如下:

<?php $link=mysqli_connect("localhost", "root", "111"); mysqli_select_db($link, "db_database23"); mysqli_query($link, "set names gb2312"); $sort=$_GET['txt_sort']; mysqli_query($link, "insert into tb_sort(sort) values('$sort')"); header('Content-type: text/html; charset=GB2312'); //指定发送数据的编码格式为GB2312 ?> <! -- 下面的代码部分是单元格id属性中的代码部分,与步骤(3)等同,只是不包括元素本身的开始标记和结束 标记<td width="14%"valign="baseline"id="sort_id">,该属性用于指定HTML文本替换元素的内容。 --! > <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <select name="select" > <?php $link=mysqli_connect("localhost", "root", "111"); //连接MySQL数据库服务器 mysqli_select_db($link, "db_database23"); //选择数据库文件 mysqli_query($link, "set names gb2312"); //设置数据库编码类型为GB2312 $sql=mysqli_query($link, "select distinct * from tb_sort group by sort"); $result=mysqli_fetch_object($sql); //检索数据表中的信息 do{ header('Content-type: text/html; charset=GB2312'); //指定发送数据的编码格式为GB2312 ?> <option value="<?php echo $result->sort; ?>" selected><?php echo $result->sort; ?></option> <?php }while($result=mysqli_fetch_object($sql)); ?> </select> </td> <td width="20%" height="21" align="right" valign="baseline"> <input name="txt_sort" type="text" id="txt_sort" size="12" style="border:1px #64284A solid; height:21"> </td> <td width="49%" height="21" align="left" valign="baseline"> <img src="images/add.gif" width="67" height="23" onclick="checksort(); "> </td> </tr> </table>

运行本例,在“文章类别”后面的文本框中输入“心灵感悟”,单击“添加分类”按钮,即可在“文章类别”下拉列表框中成功添加该分类信息,如图23.4所示。

图23.4 在PHP中应用Ajax技术实现博客文章类别添加

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

23.4 在PHP中应用Ajax技术的典型应用