前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery异步post上传表单数据【标准化模板】

JQuery异步post上传表单数据【标准化模板】

作者头像
Crayon鑫
发布2023-10-10 16:16:01
2090
发布2023-10-10 16:16:01
举报

HTML代码

代码语言:javascript
复制
<form id="form"  enctype="multipart/form-data" method="post" >
	<input type="file" name="file1" id="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"><br>
	<input type="text" name="l1" id="" value="1"><br>
	<input type="number" name="l2" id="" value="2"><br>
	<input type="checkbox" name="l3" id="" ><br>
	<input type="submit" value="上传数据">
</form>

jquery代码

代码语言:javascript
复制
$("#form").submit(function (e) { 
    e.preventDefault();//阻止表单刷新,也可以函数最后加上 return false;
    var formData = new FormData($("#form")[0]);//formData对象实例化的参数必须为DOM,加上[0]jquery对象转为dom对象
    $.ajax({
        url:"http://0.0.0.1/api", /*接口域名地址*/
        type:'post',
        data: formData,
        //因为传输的是formdata。必须添加下面这两行,让浏览器自动处理formdata
        contentType: false,
        processData: false,
        //如果是跨域请求,想带上cookie,请加上下面四行
        //xhrFields: {
        //    withCredentials: true
        //},
        //crossDomain: true,
        success:function(res){
            console.log(res);
            //根据返回的JSON格式数据判断数据传输状态,这个看后端返回的啥数据,没有标准。
            // if(res.data["code"]==200){
            //     alert('成功');
            // }else if(res.data["code"]==400){
            //     alert('失败');
            // }else{
            //     console.log(res);
            // }
        },
        error:function(error){
            console.log(error);
        }
    })
});

后端Flask数据处理

代码语言:javascript
复制
@app.route('/api',methods=['GET','POST']) 
def api():
    # for item in request.form:
    #     print(item)
    d1 = request.form.get("l1")
    d2 = request.form.get("l2")
    d3 = request.form.get("l3")
    file = request.files.get('file') 
    print(file)
 	dict = {"code":200,"data":"处理完毕"}
    return jsonify(dict)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML代码
  • jquery代码
  • 后端Flask数据处理
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档