search

博客列表 >1225_jquery异步请求 第40课

1225_jquery异步请求 第40课

叮叮当当
叮叮当当原创
2020年01月01日 22:15:33733浏览

1、登录页 form.html

  1.     <form>
  2.         <input type="text" name="username" placeholder="用户名">
  3.         <input type="password" name="pwd" placeholder="密码">
  4.         <select name="city"></select>
  6.         <button type="button" onclick="dologin()">登录</button>
  7.         <button type="button" onclick="dologin1()">登录2</button>
  8.     </form>
  10.     <script type="text/javascript">
  12.         // post (用的最多)
  13.         function dologin() {
  14.             var _username = $.trim($('input[name="username"]').val());
  15.             var _pwd = $.trim($('input[name="pwd"]').val());
  17.             // $.post('dologin.php', $('form').serialize(), function(res){
  18.             $.post('dologin.php',{username:_username,pwd:_pwd}, function(res){
  19.                 alert( res.msg );
  20.                 if(res.code==0){
  21.                     window.location.href = "home.html";
  22.                 }
  23.             }, 'json');
  24.         }
  26.         // get
  27.         function dologin1() {
  28.             var _username = $.trim($('input[name="username"]').val());
  29.             var _pwd = $.trim($('input[name="pwd"]').val());
  31.             $.get('dologin.php?username='+_username+'&pwd='+_pwd, function(res){
  32.                 alert( res.msg );
  33.                 if(res.code==0){
  34.                     window.location.href = "home.html";
  35.                 }
  36.             }, 'json');
  37.         }
  39.         // 异步加载数据
  40.         function getdata(){
  41.             $.get('getcity.php',function(res){
  42.                 if( res.code==0 ){
  43.                     var html = '';
  44.                     $.each( res.data, function(i,v){
  45.                         html += '<option value="'+v.id+'">'+v.title+'</option>';
  46.                     });
  47.                     $('select[name="city"]').html( html ); // $('select[name="city"]').empty().append(html);
  48.                 }
  49.             },'json');
  50.         }
  51.         getdata();
  53.     </script>

2、后台验证 dologin.php

  1. // 方便演示，写了$_REQUEST
  2. $username = $_REQUEST['username']; // $_POST['username'], $_GET['username']
  3. $pwd = $_REQUEST['pwd'];
  5. if($username!='admin'){
  6.     $data = json_encode( ['code'=>1,'msg'=>'用户名错误'] );
  7.     exit($data);
  8. }
  10. if($pwd!='123'){
  11.     $data = json_encode( ['code'=>1,'msg'=>'密码错误'] );
  12.     exit($data);
  13. }
  15. $data = json_encode( ['code'=>0,'msg'=>'登录成功'] );
  16. exit($data);

3、获取数据 getcity.php

  1. $citys = [
  2.     ['id'=>3,'title'=>'南京'],
  3.     ['id'=>6,'title'=>'无锡'],
  4.     ['id'=>7,'title'=>'镇江']
  5. ];
  7. $data = json_encode( ['code'=>0, 'msg'=>'success', 'data'=>$citys] );
  9. exit($data);

4、首页 home.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>系统首页</title>
  6. </head>
  8. <body>
  9.     系统首页
  10. </body>
  11. </html>

上一条：html页面布局实战-grid属性应用—PHP培训第十期下一条：1228-Grid重写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多