//form 
 
 
 
 

  
  //ajax提交表单 不需要依靠form标签。
 
 
 
 

  
  //我出现的问题是，在有<form action="/login" method="post">....</form>的时候，
 
 
 
 

  
  //ajax error处理函数，会自动跳转到一个页面，页面中显示返回的结果 例如{msg:'error'}
 
 
 
 
 
  
  16 
  
  <
  
  div 
  
  class
  
  =
  
  "login"
  
  >
 
 
 
 
 
  
  17     
  
  <
  
  p
  
  >
 
 
 
 
 
  
  18         
  
  <
  
  label 
  
  for
  
  =
  
  "login"
  
  >
  
  用户名
  
  :<
  
  /label>
 
 
 
 
 
  
  19         
  
  <
  
  input 
  
  type
  
  =
  
  "text" 
  
  name
  
  =
  
  "userName" 
  
  id
  
  =
  
  "userName" 
  
  placeholder
  
  =
  
  '' 
  
  value
  
  =
  
  "example"
  
  >
 
 
 
 
 
  
  20     
  
  <
  
  /p>
 
 
 
 
 
  
  21 
 
 
 
 
 
  
  22     
  
  <
  
  p
  
  >
 
 
 
 
 
  
  23         
  
  <
  
  label 
  
  for
  
  =
  
  "password"
  
  >
  
  密码
  
  :<
  
  /label>
 
 
 
 
 
  
  24         
  
  <
  
  input 
  
  type
  
  =
  
  "password" 
  
  name
  
  =
  
  "password" 
  
  id
  
  =
  
  "password" 
  
  placeholder
  
  =
  
  "example"
  
  >
 
 
 
 
 
  
  25     
  
  <
  
  /p>
 
 
 
 
 
  
  26 
 
 
 
 
 
  
  27     
  
  <
  
  p 
  
  class
  
  =
  
  "login-submit"
  
  >
 
 
 
 
 
  
  28         
  
  <
  
  button 
  
  class
  
  =
  
  "login-button"
  
  >
  
  Login
  
  <
  
  /button>
 
 
 
 
 
  
  29     
  
  <
  
  /p>
 
 
 
 
 
  
  30     
  
  <
  
  p 
  
  class
  
  =
  
  "forgot-password"
  
  >
  
  请输入用户名和密码
  
  <
  
  /p>
 
 
 
 
 
  
  31     
  
  <!--
  
  p 
  
  class
  
  =
  
  "forgot-password"
  
  ><
  
  a 
  
  href
  
  =
  
  "index.html"
  
  >
  
  Forgot 
  
  your 
  
  password
  
  ?<
  
  /a></p-->
 
 
 
 
 
  
  32 
  
  <
  
  /div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  //ajax
 
 
 
 
 
  
  34 
  
  <
  
  script
  
  >
 
 
 
 
 
  
  35     
  
  $
  
  (
  
  document
  
  ).
  
  ready
  
  (
  
  function
  
  (){
 
 
 
 
 
  
  36         
  
  $
  
  (
  
  '.login-button'
  
  ).
  
  on
  
  (
  
  'click'
  
  ,
  
  function
  
  (){
 
 
 
 
 
  
  37             
  
  var 
  
  userName 
  
  = 
  
  $
  
  (
  
  '#userName'
  
  ).
  
  val
  
  ();
 
 
 
 
 
  
  38             
  
  var 
  
  password 
  
  = 
  
  $
  
  (
  
  '#password'
  
  ).
  
  val
  
  ();
 
 
 
 
 
  
  39             
  
  console
  
  .
  
  log
  
  (
  
  userName
  
  ,
  
  password
  
  );
 
 
 
 
 
  
  40             
  
  if
  
  (
  
  !
  
  userName
  
  .
  
  length
  
  ){
 
 
 
 
 
  
  41                 
  
  alert
  
  (
  
  '请输入用户名！'
  
  );
 
 
 
 
 
  
  42                 
  
  $
  
  (
  
  '#userName'
  
  ).
  
  focus
  
  ();
 
 
 
 
 
  
  43                 
  
  return 
  
  false
  
  ;
 
 
 
 
 
  
  44             
  
  }
 
 
 
 
 
  
  45             
  
  if
  
  (
  
  !
  
  password
  
  .
  
  length
  
  ){
 
 
 
 
 
  
  46                 
  
  alert
  
  (
  
  '请输入用户名！'
  
  );
 
 
 
 
 
  
  47                 
  
  $
  
  (
  
  '#password'
  
  ).
  
  focus
  
  ();
 
 
 
 
 
  
  48                 
  
  return 
  
  false
  
  ;
 
 
 
 
 
  
  49             
  
  }
 
 
 
 
 
  
  50 
 
 
 
 
 
  
  51             
  
  $
  
  .
  
  ajax
  
  ({
 
 
 
 
 
  
  52                 
  
  url
  
  :
  
  '/login'
  
  ,
 
 
 
 
 
  
  53                 
  
  type
  
  :
  
  'post'
  
  ,
 
 
 
 
 
  
  54                 
  
  data
  
  :
  
  {
  
  userName
  
  :
  
  userName
  
  ,
  
  password
  
  :
  
  password
  
  },
 
 
 
 
 
  
  55                 
  
  dataType
  
  :
  
  'json'
  
  ,
 
 
 
 
 
  
  56                 
  
  async
  
  :
  
  true
  
  ,
 
 
 
 
 
  
  57                 
  
  success
  
  :
  
  function
  
  ( 
  
  result 
  
  ){
 
 
 
 
 
  
  58                     
  
  console
  
  .
  
  log
  
  (
  
  'success'
  
  ,
  
  result
  
  );
 
 
 
 
 
  
  59                     
  
  window
  
  .
  
  location
  
  .
  
  href
  
  =
  
  '/home'
  
  ;
 
 
 
 
 
  
  62                 
  
  },
 
 
 
 
 
  
  63                 
  
  error
  
  :
  
  function
  
  (
  
  err
  
  ){
 
 
 
 
 
  
  64                     
  
  console
  
  .
  
  log
  
  (
  
  err
  
  );
 
 
 
 
 
  
  65                     
  
  $
  
  (
  
  '.forgot-password'
  
  )[
  
  0
  
  ].
  
  innerHTML 
  
  = 
  
  '您输入的账号或密码有误，请重新输入'
  
  ;
 
 
 
 
 
  
  66                 
  
  }
 
 
 
 
 
  
  67             
  
  });
 
 
 
 
 
  
  68         
  
  });
 
 
 
 
 
  
  69     
  
  });
 
 
 
 
 
  
  70 
  
  <
  
  /script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 @H_404_805@ 
  
  //backend