首页 > 其他分享 >FormData对象的使用方法

FormData对象的使用方法

时间:2022-09-29 19:44:05浏览次数:47  
标签:form 对象 FormData xhr var btn 方法 formData

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" value="提交" id="btn">
    </form>
    <script>
        var btn = document.getElementById('btn');
        var form = document.getElementById('form');
        btn.onclick = function() {
            //将普通表单转换为form表单
            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'http://localhost:3000/formData');
            xhr.send(formData);
            xhr.onload = function() {
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

</html>

 

标签:form,对象,FormData,xhr,var,btn,方法,formData
From: https://www.cnblogs.com/wangxianwen/p/16742761.html

相关文章

  • '$.browser.msie' 为空或不是对象
    最近决定整改一下jquery的版本,于是就将jquery从1.7.2升级到了1.9.1结果就发现原有的插件报错了。'$.browser.msie'为空或不是对象,这个是jQuery错误出现这个错误,是......
  • Javadoc转换chm帮助文档的四种方法总结
     1)将现有的html文件集(比如api)制作成chm文档​​​​​​http://www.blogjava.net/lishunli/archive/2010/01/07/308618.html​​ 我建议使用javadoc2chm,看上去最......
  • C#交换方法指针
    被引用的dll是testDllFr.dll,其代码为:namespacetestDLLFr{publicclassTestA{publicstaticvoidTestAM(){Console.Write......
  • 序列化成Json时,多个对象互相引用导致死循环 Text.Json.JsonException: A possible obj
    错误:当两个类中的属性互相引用时,导致对象实例序列化成Json时死循环,错误如下:System.Text.Json.JsonException:Apossibleobjectcyclewasdetected.Thiscaneither......
  • C++ 调用python方法
    主流方法将python程序编程文本形式的动态链接库,在c/c++程序中调用其中定义的函数。本质上是在c++中启动了一个python解释器,由解释器对python相关的代码进行执行,执行......
  • Python面向对象
    1.面向对象2.什么是类和类变量?3.实例和实例化以及实例变量4.数据成员5.方法和静态方法以及类方法6.什么是方法重写7.__init__8.self9.类的初始化:new()和i......
  • ffmpeg5.0+h264+h265 windows下编译方法
    目录前言一,源码包下载1.ffmpeg下载2.下载x264代码3.下载x265代码二,MSYS2安装三,安装cmake工具四,代码编译1.编译x2642.编译x2653.编译ffmpeg五,功能验证1.x264......
  • 返回Json对象不忽略null值SerializerFeature.WriteMapNullValue)
    Fastjson的SerializerFeature序列化属性QuoteFieldNames———-输出key时是否使用双引号,默认为trueWriteMapNullValue——–是否输出值为null的字段,默认为falseWriteN......
  • ts中常用Event 事件对象类型
    常用Event事件对象类型:ClipboardEvent<T=Element>剪贴板事件对象DragEvent<T=Element>拖拽事件对象ChangeEvent<T=Element>Change事件对象KeyboardEven......
  • 数据类型内置方法
    数据类型内置方法之前我们所学习的每一种数据类型本身就含有一系列的操作方法,内置方法是其中最多的。以字符串为例,介绍一下调用内置方法的格式:print('jason'.upper())......