关于使用jquery + ajax 实现登陆

直接亮出代码-当然首先必须要导入jQuery

<link href="css/jquery.ui.all.css" type="text/css" rel="stylesheet"> 


<form action="#">
      <div class="login_padding" id="login_model">
        <h2>USERNAME <span style="height: 20px;color: red"></span></h2>
        <label>
          <input type="text" id="username" class="txt_input txt_input2"
                 value="Your name">
        </label>
        <h2>PASSWORD <span style="height: 20px;color: red"></span></h2>
        <label>
          <input type="password" name="textfield2" id="userpwd" class="txt_input"
                 value="******">
        </label>
        <p class="forgot"><a id="iforget" href="javascript:void(0);">Forgot your password?</a></p>
        <div class="rem_sub">
          <div class="rem_sub_l">
            <input type="checkbox" name="checkbox" id="save_me">
            <label>Remember me</label>
          </div>
          <label>
            <input type="button" class="sub_button" onclick="login()" name="button" id="button" value="SIGN-IN"
                   style="opacity: 0.7;">
          </label>
        </div>
      </div>
    </form>



<script type="text/javascript">
  /*登陆方法*/
  function login() {
    var name = $("#username").val();
    var password = $("#userpwd").val();
    if (!name) {
      alert("用户名必填!");
      $("#username").focus();//获取焦点
      return;
    }
    if (!password) {
      alert("密码必填!");
      $("#userpwd").focus();// 获取焦点
      return;
    }
    $.ajax({
      url: 'http://localhost:8080/api/user/login',
      type: 'POST',
      cache: false,
      dataType: 'text',
      data: {name: "userName", password: "password"},
      processData: false,
      contentType: false
    }).done(function (res) {
      window.location.href = "index.html";
    }).fail(function (res) {
      alert("用户名或者密码错误!");
    });
  }
</script>