原生AJAX

POST请求

<!-- 登录 -->
<script>
  const loginBtn = document.getElementById("loginBtn");
  const loginName = document.getElementById("loginName");
  const password = document.getElementById("password");
  loginBtn.onclick = function(){
    const url = "/adminLogin";
    const ajax = new XMLHttpRequest();
    ajax.open("post",url);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send("loginName=" + loginName.value + "&password=" + password.value);
    ajax.onreadystatechange = function(){
      //4表示执行完成 200表示执行成功
      if(ajax.readyState == 4 && ajax.status == 200){
        //获取相应报文(字符串形式 未转换成JSON)
        const responseData = ajax.responseText;
        //获取相应报文(JSON格式)
        const json = JSON.parse(responseData);
        console.log(responseData);
        if(json.code == "200"){
          if(json.data.identify == "一般管理员"){
            lightyear.url('/administrator_index');  // 先指定跳转链接
            lightyear.notify('登录成功,页面即将自动跳转~', 'success', 3000);
          }else{
            lightyear.url('/admin_index');  // 先指定跳转链接
            lightyear.notify('登录成功,页面即将自动跳转~', 'success', 3000);
          }
        }
        if(json.code == "999"){
          lightyear.notify(json.msg, 'danger', 100);
        }
      }
    }
  }
</script>

POST请求

<form id="updatePasswordForm" onsubmit="return updatePasswordSub()">
	<div class="form-group has-feedback feedback-left">
		<input th:value="${session.user.loginName}" readonly type="text" placeholder="用户名" class="form-control" name="loginName" id="loginName" style="color: orange;"/>
			<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
	 </div>
     <div class="form-group has-feedback feedback-left">
		<input type="password" placeholder="新密码" class="form-control" id="password" name="password" style="color: orange;"/>
		<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
	</div>
	<div class="form-group has-feedback feedback-left">
		<input type="password" placeholder="确认密码" class="form-control" id="surePassword" style="color: orange;"/>
		<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
	</div>
	<div class="form-group">
		<input class="btn btn-block btn-primary" type="submit" value="确认修改密码">
	</div>
	<div class="form-group">
		<a href="/user_login" class="btn btn-block btn-warning">返回登录</a>
	</div>
</form>

<!-- 注册 -->
<script>
  //定义ajax请求(在form中使用onSubmit作为触发  配合required属性使用)
  function updatePasswordSub(){

    const password = document.getElementById("password");
    const surePassword = document.getElementById("surePassword");
    if(password.value != surePassword.value){
      lightyear.notify("两次密码输入不一样", 'success', 100);
    }

    //获取表单
    const updatePasswordForm = document.getElementById("updatePasswordForm");
    //使用FormData初始化表单数据
    const form = new FormData(updatePasswordForm);
    //请求接口
    const url = "/userUpdatePassword";
    //创建请求
    const ajax = new XMLHttpRequest();
    //打开接口地址
    ajax.open("POST",url);
    //发送数据 请求接口
    ajax.send(form);
    //执行成功则触发相应的事件
    ajax.onreadystatechange = function(){
      //4表示执行完成 200表示执行成功
      if(ajax.readyState == 4 && ajax.status == 200){
        //获取相应报文(字符串形式 未转换成JSON)
        const responseData = ajax.responseText;
        //获取相应报文(JSON格式)
        const json = JSON.parse(responseData);
        console.log(responseData);
        if(json.code == "200"){
          lightyear.url('/user_login');  // 先指定跳转链接
          lightyear.notify('修改成功,页面即将自动跳转~', 'success', 3000);
        }
        else if(json.code == "999"){
          lightyear.notify(json.msg, 'danger', 100);
        }
      }
    }
    return false; //必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
  }
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值