ajax 2.0 写文章模块

最新推荐文章于 2021-02-13 22:12:53 发布

江流儿1314

最新推荐文章于 2021-02-13 22:12:53 发布

阅读量147

点赞数

分类专栏： ajax的使用文章标签： ajax 2.0 写文章模块

本文链接：https://blog.csdn.net/qq_37011771/article/details/80575985

版权

ajax的使用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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">
    <title>Document</title>
    <style>
    .progress{
        width: 300px;
        height: 25px;
        border: 1px red solid;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }
    .step{
        width:0px;
        height: 100%;
        background-color: skyblue;
    }
    span {
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    </style>
</head>
<body>
<form action="">
    <input type="text"name="userName">
    <br>
    <br>
    <input type="text" name="userPass">
    <br>
    <input type="file" name="file">
    <div class="progress">
        <span>0%</span>
        <div class="step"></div>
    </div>
</form>
    <br>
    <input type="button" value="ajax" class="ajax">
</body>

<script src="./jquery.min.js"></script>
<script>

//ajax2.0
$(function() {
    $('.ajax').click(function(event) {
        //如果是form表单,需要阻止默认事件
        //event.preventDefault() //阻止form表单的默认提交事件
        var sendData = new FormData($('form')[0]);
        $.ajax({
            url:'接口地址',
            data:sendData,
            type:'post',
            //不让JQ帮我们设置任何的请求头
            contentType:false,
            //processData 默认为true,会格式化我们发送的数据,设置为false,不让其格式化,是什么就给我发什么.
            processData:false,
            success:function(backData){
                console.log(backData);
            }
        })
    })
})
</script>

</html>

江流儿1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 2.0 写文章模块

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录