美文网首页
原生js使用Ajax的post请求

原生js使用Ajax的post请求

作者: 风流司郎中 | 来源:发表于2018-01-15 14:29 被阅读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)
    
    });
    

    相关文章

      网友评论

          本文标题:原生js使用Ajax的post请求

          本文链接:https://www.haomeiwen.com/subject/bmvroxtx.html