• 【.NET】HTML5 特性


     FromData是在XMLHttpRequest定义的,能序列化出表单,常用有3个用途:

    1.ajax上传文件域

    2.对表单上的控件取值,赋值,追加,key存在,删key

    3.ajax提交表单上的数据

    例子:1.ajax上传文件域

    $('input[type="file"]').on('change', function(){
                var file = this.files[0];
                var formData = new FormData($('#uploadImg')[0]);
                formData.append('file', file);
                console.log(formData.get('file'))
                $.ajax({
                    url: 'b.php',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    //dataType: 'json',
                    //async: false,
                    processData: false,
                    contentType: false,
                }).done(function(res) {
                    console.log(res)
                }).fail(function(res) {
                    console.log(res)
                });
            });
    processData:true是转换成字符串形式,false是不转换
    contentType:类似dataType,但 dataType是后端返回格式,如json、text,这个是前端的发送数据格式,默认是application/x-www-form-urlencoded,false是不报错,常用的还有:
    4种常见发送编码格式:
    application/x-www-form-urlencoded:按照key=val形式编码
    application/json:json序列化传送,WebAPI应该常用
    multipart/form-data:一般用于上传文件
    text/xml:xml形式

    在C# ,可以用HttpPostedFile接收,然后SaveAs,简单例子:

    HttpPostedFile imgFile = Request.Files["file"];
    imgFile.SaveAs("路径");

    例子:2.对表单上的控件赋值

    <form id="advForm">
        <p>广告名称:<input type="text" name="advName"  value="xixi"></p>
        <p>广告类别:<select name="advType">
            <option value="1">轮播图</option>
            <option value="2">轮播图底部广告</option>
            <option value="3">热门回收广告</option>
            <option value="4">优品精选广告</option>
        </select></p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>

    取值,用get()

    //获得表单按钮元素
    var btn=document.querySelector("#btn");
    //为按钮添加点击事件
    btn.onclick=function(){
        //根据ID获得页面当中的form表单元素
        var form=document.querySelector("#advForm");
        //将获得的表单元素作为参数,对formData进行初始化
        var formdata=new FormData(form);
        //通过get方法获得name为advName元素的value值
        console.log(formdata.get("advName"));//xixi
        //通过get方法获得name为advType元素的value值
        console.log(formdata.get("advType"));//1 
    }

    赋值,用set()

    //通过FormData构造函数创建一个空对象
    var formdata=new FormData();
    //如果key的值不存在会为数据添加一个key为name值为laoliu的数据
    formdata.set("name","laoli");
    //通过get方法读取key为name的第一个值
    console.log(formdata.get("name"));//laoli

    追加,用append()

    //通过FormData构造函数创建一个空对象
    var formdata=new FormData();
    //通过append()方法在末尾追加key为name值为laoliu的数据
    formdata.append("name","laoliu");

    key存在,用has()

    //通过FormData构造函数创建一个空对象
    var formdata=new FormData();
    //通过append()方法在末尾追加key为name值为laoliu的数据
    formdata.append("name","laoliu");
    //判断是否包含key为name的数据
    console.log(formdata.has("name"));//true

    删key,用delete()

    //通过FormData构造函数创建一个空对象
    var formdata=new FormData();
    
    //删除key为name的值
    formdata.delete("name");

    例子:ajax提交表单上的数据,其实跟上传文件一样用ajax。

    在C# ,可以用Request.Form[""]接收

    string abc = Request.Form["abc"];

    参考:

    https://www.jianshu.com/p/e984c3619019

  • 相关阅读:
    竞赛图和哈密顿回路
    Hall 定理
    Vim 和 Gdb 学习笔记
    AT4996 [AGC034F] RNG and XOR(FWT)
    UOJ310 黎明前的巧克力(fwt)
    AT5202 [AGC038E] Gachapon(min-max)
    AT2289 [ARC067D] Yakiniku Restaurants(水题)
    拉格朗日插值
    [CSP-SJX2019]散步(模拟)
    Leetcode547 朋友圈 图的DFS与unionFind算法
  • 原文地址:https://www.cnblogs.com/laokchen/p/12483985.html
Copyright © 2020-2023  润新知