• 利用ajax和thinkphp框架联合


    之前说了一些ajax的基本知识点,而且自己本身的任务又是使用thinkphp框架,所以不可避免的,我们要对ajax和thinkphp框架进行结合使用。

    这次我们主要讲一个ajax的注册功能,使用户输入学号后,就可直接显示数据库里是否存在此信息。

    我做的时候,只需要改动两个地方的代码就可以了

    首先来对我们的html页面进行整改:

    我们现在是想要唯一的学号不会重复,所以在学号的那个input里加上个id="sno",然后写个失去焦点的方法。

     1 <table align="center" cellspacing="0">
     2 
     3 <script type="text/javascript">
     4 function checkno(){
     5     var nm=document.getElementById('sno').value;
     6     var xhr=new XMLHttpRequest();
     7     xhr.onreadystatechange=function(){
     8         if(xhr.readyState==4){
     9             document.getElementById('check').innerHTML=xhr.responseText;  //在本页面显示
    10         }
    11     }
    12     xhr.open('get','/xampp/sse/index.php/home/Student/checkNM/number/'+nm);
    13     xhr.send(null);
    14 }
    15 
    16 </script>
    17 
    18 <tr>
    19 <td align="right">学号:</td>
    20 <td align="left">
    21 <INPUT type="text" name="sno" id="sno" onblur="checkno()">
    22 <span id="check"></span>  <!--为了在本页面显示-->
    23 </td>
    24 
    25 </tr>
    26 
    27 <tr>
    28 <td align="right">姓名:</td>
    29 <td align="left"><INPUT type="text" name="sname"></td>
    30 </tr>

    然后在相应的学生的控制器里(StudentController.class.php)增加一段相对应的代码

     1     public function reg(){        
     2         $this->display();
     3     }
     4     //用户名校验
     5     public function checkNM($number){
     6         $info=D('student')->where("sno='$number'")->find();  //找数据库里的信息 这里的sno是数据库里的名字
     7         if($info){
     8             echo "<span style='color:red;'>抱歉,该学号已存在</span>";  
     9         }else{
    10             echo "<span style='color:green;'>恭喜,可以使用该学号</span>";
    11         }
    12         exit;
    13     }

    要注意每个相对应的id一定要写正确!!

  • 相关阅读:
    tcpdump 抓包
    mysql常用日期函数
    接口自动化测试,一键快速校验接口返回值全部字段
    实训项目
    vue proxyTable 代理方式 解决 跨域pathRewrite
    cookie, session, token 发展史
    Failed to set locale, defaulting to C.UTF-8
    java String与Integer的相互转化
    java LocalDateTime 常用 转换 方法
    Java命令里面的EQ、NE、GT、LT、GE、LE分别代表含义
  • 原文地址:https://www.cnblogs.com/ck-999/p/5521415.html
Copyright © 2020-2023  润新知