实例演示三

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>演示实例三:AJAX交互</title>
    6. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    7. <script>
    8. $(function(){
    9.     $("#submit-btn").click(function(){
    10.         var userName=$("#user-name").val();
    11.         var password=$("#user-password").val();
    12.         if(userName==""){
    13.             alert('用户名不能为空！');
    14.             return false;
    15.         }
    16.         $.post("<?php echo $this->getActionUrl('ajax_handle'); ?>",
    17.  {"user_name":userName, "user_password":password}, function(json){
    18.             if(json.status==true){
    19.                 //当有网址跳转或页面刷新时
    20.                 if(json.data.target){
    21.                     if(json.data.target=='refresh'){
    22.                         location.reload();
    23.                     } else {
    24.                         location.href=json.data.target;
    25.                     }
    26.                 }
    27.             } else {
    28.                 if(json.msg!='') {
    29.                     alert(json.msg);
    30.             }
    31.         }, 'json');
    32.     });
    33. });
    34. </script>
    35. </head>
    36.  
    37. <body>
    38. <fieldset>
    39. <legend>用户登陆：</legend>
    40. <label>用户名：</label>：
    41. <input type="text" name="user_name" id="user-name"><br>
    42. <label>密码：</label>：
    43. <input type="password" name="user_password" id="user-password"><br>
    44. <input type="button" name="submit-btn" id="submit-btn" value="登陆">
    45. </fieldset>
    46. </html>