01-ajax请求流程,get和post区别,模拟登陆页面前后端交互场景

一、ajax请求流程

1、创建ajax对象
var xhr = new XMLHttpRequest()
2、配置本次请求信息
xhr.open(请求方式,请求地址,是否异步)
3、注册请求完成事件
xhr.onload = function() {
console.log(xhr.responseText) //获取后端返回值
}
4、把请求发送出去
xhr.send()

在这里插入图片描述

二、当后端返回数据类型是json格式时,需要进行转换

在请求完成后执行函数中使用以下方式拿到返回内容:
JSON.parse(xhr.responseText)

三、请求方式get和post区别

在这里插入图片描述
注意,在post发送数据时,需要特殊说明传递参数的格式,这个后端会给,在发送数据前需要加上
xhr.setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’)
在这里插入图片描述

四、模拟登陆前后端交互场景

<style>
*{
    margin: 0;
    padding:0;
}
form {
    width: 500px;
    padding:20px;
    margin: 50px auto;
    border:3px solid pink;
    display: flex;
    flex-direction: column;
    font-size:30px;
    padding-top:50px;
    position:relative;
}
form > span {
    position: absolute;
    left:50%;
    top:5px;
    transform:translateX(-50%);
    width:100%;
    text-align: center;
    display:none;
}

</style>

<body>
<script>
<form>
<span class="error">用户名或者密码错误</span>
<label>
用户名:<input class="username" type="text">
</label>
<label>
密码: <input  class="passward" type="passward">
</label>
<button>登陆</button>
</form>
</script>
<script>
 var loginForm = document.querySelector('form')
 var nameInp = document.querySelector('username')
 var pwdInp = document.querySelector('.passward')
 var errBox = document.querySelector('.error')
 
 loginForm.onsubmit = function(e){
     #阻止表单默认提交行为
      e.preventDefault()
      
      var name = nameInp.value
      var pwd = pwdInp.value
      
      if(!name || !pwd) return alert('请完整填写表单')
      
      var xhr = new XMLHttpRequest()
      xhr.open('POST','http://localhost:8080/users/login',true)
      xhr.onload=function(){
          var res = Json.parse(xhr.responseText)
          console.log(res)     
          
           if(res.code === 0){
               errBox.style.display = 'block'           
           } else{
               window.location.href="./home.html"           
           }
      }
      
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
      xhr.send('username='+name+'&password='+passward)
 }
</script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值