原生js使用Ajax的post请求

2018-01-15  本文已影响0人  风流司郎中

html:

<div class="log-in-wrap">
    <h4>后台登录</h4>
    <div class="account-wrap">
        <input class="account" type="text" placeholder="请输入账号">
    </div>
    <div class="password-warp">
        <input class="password" type="password" placeholder="请输入密码">
        <div class="test"></div>
    </div>
    <div class="submit-wrap">
        <input type="submit" class="submit">
    </div>
</div>
<script src="js/log-in.js"></script>

js:
1首先获取输入框的值,
2.新建个Ajax请求。
3.使用post方法发送请求
4.自定义form提交
此格式要求的数据类型如下图所示
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
每条数据以&作为分隔符,jQuery.ajax();传递的数据就是这种类型


image.png
var submit=document.getElementsByClassName('submit')[0],
    account=document.getElementsByClassName('account')[0],
    password=document.getElementsByClassName('password')[0];
submit.addEventListener('click',function () {
    var ajax=new XMLHttpRequest();
    ajax.open('POST','/carrots-admin-ajax/a/login\n',true);
    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
    ajax.send('name='+account.value+'&pwd='+password.value);
    console.log(form)

});
上一篇下一篇

猜你喜欢

热点阅读