向egg服务端提交ajax请求

function getCsrf() {
  var keyValue = document.cookie.match("(^|;) ?csrfToken=([^;]*)(;|$)");
  return keyValue ? keyValue[2] : null;
}
$.fn.serializeObject = function() {
  var json = {};
  var map = this.serializeArray();
  $.each(map, function() {
    if (json[this.name]) {
      if (!json[this.name].push) {
        json[this.name] = [json[this.name]];
      }
      json[this.name].push(this.value || "");
    } else {
      json[this.name] = this.value || "";
    }
  });
  return json;
};
function postForm() {
  var data=$(".form").serializeObject();
  $.ajax({
    url: "/login?_csrf=" + getCsrf(),
    type: "POST",
    data: data,
    precessData: false,
    success: function(data) {
      console.log(data);
    },
    error:function (error){
      alert(error);
    }
  });
}

$(function() {
  function getCaptcha() {
    $.ajax({
      type: "GET",
      url: "/captcha",
      success: function(data) {
        document.getElementsByClassName("captcha_svg")[0].innerHTML = data;
      },
      error:function (error){
        alert(error);
      }
    });
  }
  getCaptcha();
  $(".captcha_svg").on("click", function() {
    getCaptcha();
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 重置文件 -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>登录</title>
</head>

<body>
  <div class="reg_div">
    <p>登录</p>
    <form action="/login?_csrf={{ ctx.csrf | safe }}" method="POST" class="form" enctype="multipart/form-data">
      <ul class="reg_ul">
        <li>
          <span>用户名：</span>
          <input type="text" name="username" value="" placeholder="4-8位用户名" class="reg_user"><br>
          <span class="user_hint"></span>
        </li>
        <li>
          <span>密码：</span>
          <input type="password" name="password" value="" placeholder="6-16位密码" class="reg_password"><br>
          <span class="password_hint"></span>
        </li>
        <li>
          <span class="login_captcha">验证码：</span>
          <input type="text" name="captcha" value="" placeholder="验证码" class="captcha_text">
          <i class="captcha_svg"></i>
          <br>
          <span class="captcha_hint"></span>
        </li>
        <li>
          <button type="button" name="button" class="red_button">登录</button>
        </li>
      </ul>
    </form>
  </div>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/login.js"></script>
</body>
</html>

向egg服务端提交ajax请求

猜你喜欢