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

 更新时间:2022年02月21日 11:53:49   作者:Crayon鑫  
这篇文章主要介绍了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上传表单数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • jQuery查看选中对象HTML代码的方法

    jQuery查看选中对象HTML代码的方法

    这篇文章主要介绍了jQuery查看选中对象HTML代码的方法,涉及jQuery页面元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 基于jquery实现的表格分页实现代码

    基于jquery实现的表格分页实现代码

    该方法的运用是从后台数据库中一次性取出所有的数据,运用Jquery把一部分数据隐藏起来,事实上数据还是全部在html页面中
    2011-06-06
  • 利用浏览器全屏api实现js全屏

    利用浏览器全屏api实现js全屏

    这篇文章主要介绍了利用浏览器全屏api实现js全屏的代码示例,示例中使用了jquery,把这个库的地址改成自己的,大家参考使用吧
    2014-01-01
  • jQuery仿写百度百科的目录树

    jQuery仿写百度百科的目录树

    这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式,点击右侧的目录树,左侧跳转到指定的锚点位置,滚动鼠标,游标跟随一起滚动至响应链接位置,具体实现思路大家参考下本文
    2017-01-01
  • jQuery的ready方法实现原理分析

    jQuery的ready方法实现原理分析

    这篇文章主要介绍了jQuery的ready方法实现原理分析的相关资料,需要的朋友可以参考下
    2016-10-10
  • jquery对象和DOM对象的区别介绍

    jquery对象和DOM对象的区别介绍

    jquery对象和DOM对象在使用过程很频繁,正是因为如此,好多朋友都不知道它们之间有什么区别,下面为大家详细介绍下,希望对大家有所帮助
    2013-08-08
  • 基于jquery的无刷新分页技术

    基于jquery的无刷新分页技术

    基于jquery的无刷新分页技术,需要的朋友可以参考下。
    2011-06-06
  • jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码

    这篇文章主要介绍了jquery 实现复选框的全选操作实例代码的相关资料,需要的朋友可以参考下
    2017-01-01
  • jQuery内容折叠效果插件用法实例分析(附demo源码)

    jQuery内容折叠效果插件用法实例分析(附demo源码)

    这篇文章主要介绍了jQuery内容折叠效果插件用法,结合实例形式分析了jQuery展开折叠插件jquery.coolfieldset.js的具体使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04
  • JS中Array数组学习总结

    JS中Array数组学习总结

    本文主要介绍了JS中Array数组的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论