我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

HTML代码:

<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代码:

$("#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,
        contentType: false,
        processData: false,
        //如果是跨域请求,请加上下面四行
        //xhrFields: {
        //    withCredentials: true
        //},
        //crossDomain: true,
        success:function(res){
            console.log(res);
            //根据返回的JSON格式数据判断数据传输状态,这个看后端返回的啥数据,没有标准。
            // if(res.data["code"]=="succ"){
            //     alert('成功');
            // }else if(res.data["code"]=="err"){
            //     alert('失败');
            // }else{
            //     console.log(res);
            // }
        },
        error:function(error){
            console.log(error);
        }
    })
});

后端Flask数据处理:

@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)

到此这篇关于JQuery异步post上传表单数据标准化模板的文章就介绍到这了,更多相关JQuery异步post上传表单数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JQuery异步post上传表单数据的代码怎么写

今天小编给大家分享一下JQuery异步post上传表单数据的代码怎么写的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。HTML
2023-06-29

编程热搜

目录