Ajax利用FormData提交表单

最新推荐文章于 2022-12-11 00:24:12 发布
最新推荐文章于 2022-12-11 00:24:12 发布
阅读量4k 收藏
点赞数 1
分类专栏： Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010913443/article/details/51068045
版权

一、ajax提交纯表单（不包含文件或二进制或非ASCII数据）

     ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器 49.0.2623.110 m，HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax（脚本化HTTP），都是个人理解，如有错误还望被指正。关于AJAX，XMLHttpRequest，FormData等应该还有许多待深入的问题，还需要进一步学习，本文仅目前实践内容。

                 

二、ajax上传文件

1、  上传单个文件

/* ajaxupload.jsp */

<%@ page contentType="text/html; charset = utf-8" %>
<!DOCTYPE html>
<html>
  <head>
      <title>Asynchronous Javascript and XML</title>
  </head>
  <body>
    请选择要上传的文件：<input id="uploadItem"name="uploadItem" type="file">
  <script>
      var test= function x(){
          var elem= document.getElementById("uploadItem");

          elem.addEventListener("change",function() {
              var item=  document.getElementById("uploadItem").files[0];
              var formData = new FormData();
              formData.append("uploadItem",item);

              var xhr = new XMLHttpRequest();
              xhr.open("post","../upload");
              //xhr.setRequestHeader("Content-Type","multipart/form-data");
              xhr.send(formData)

最低0.47元/天 解锁文章
智慧宝宝
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用ajax提交表单完整流程
04-19
本文将详细介绍如何利用AJAX提交表单的完整流程，以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先，我们需要创建一个HTML表单，它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如： ```...
Ajax基础到实战（四）——formData对象_ajax formdata
最新发布
2401_84438654的博客
04-28 1224
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Ajax中XMLHttpRequest
weixin_46048542的博客
08-02 986
XML HttpRequest (简称xhr)是浏览器提供的Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
ajax如何提交带有文件的from表单
w13966597931的博客
08-03 2165
ajax如何提交带有文件的from表单，以及from表单的几种请求方式
Ajax看这一篇就足够了：ajax,XMLHttpRequest,xml,json,FormData,跨域
subsistent的博客
12-11 685
Ajax看这一篇就足够了：ajax,XMLHttpRequest,xml,json,FormData,跨域
AJAX网络请求 —— 简单的发送一个FormData表单数据（二）
秋天，黄叶坠地，凉风有信。
03-16 2738
文章目录FormData发送一个简单的表单FormData 方法发送带有文件的表单发送具有 Blob 数据的表单总结 FormData 这一章是关于发送 HTML 表单的：带有或不带文件，带有其他字段等。 FormData 对象可以提供帮助。你可能已经猜到了，它是表示 HTML 表单数据的对象。 构造函数是： let formData = new FormData([form]); 如果提供了 HTML form 元素，它会自动捕获 form 元素字段。 FormData 的特殊之处在于网络方法（netw
Ajax+FormData+javascript实现无刷新表单信息提交
10-21
在前端开发中ajax，formdata和js实现无刷新表单信息提交非常棒，接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下
AJAX提交表单数据实例分析
01-19
本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下： var TINY={}; TINY.ajax = function() { return { /** * @param string type 请求类型,post,get（目前只实现了这两种） * @param ...
thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json完整实例
12-20
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json。分享给大家供大家参考，具体如下： 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...
jQuery的ajax发送FormData的方式
01-23
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
如何在Ajax中使用FormData对象传递数据，JQuery中的$.ajax()方法怎么使用
冰山一树Sankey的博客
03-19 4153
如何在Ajax中使用FormData对象传递数据，JQuery中的$.ajax()方法怎么使用 Ajax基础概述以及封装请查看 Ajax概述，封装以及联合模板引擎进行数据交互_冰山一树Sankey的博客-CSDN博客 一. FormData对象 1.1 使用 作用： 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件 准备 HTML 表单 <form id="form"> <input type=
ajax提交form表单带文件
zq328525的博客
07-05 409
ajax内容 var form = new FormData(document.getElementById("myForm")); $.ajax({ type :"post", url : "{:url('home/user.login/regDo')}", ...
通过Ajax方式上传文件，使用FormData进行Ajax请求
热门推荐
Inuyasha1121的专栏
07-15 7万+
通过传统的form表单提交的方式上传文件： 测试通过Rest接口上传文件 指定文件名： 上传文件： 关键字1： 关键字2： 关键字3： 不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。
jQuery中的$.ajax()方法参数详解
IT全栈 华强工作室
08-20 6406
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.time
通过ajax提交form表单数据的几种方式
前端开发-陈善强
01-11 2万+
一、FormData方法 作用: 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件 使用 在原生ajax中的使用 <form id="form"> <input type="text" name="username" /> <input type="password" ...
Ajax基础到实战（四）——formData对象
雨的印记的博客
10-29 836
1. formData对象的作用 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件 2. formData对象的使用 准备HTML表单 <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type
Java 前端使用Ajax通过FormData传递文件和表单数据到后台
bai大伯伯的博客
01-23 1万+
&lt;form id="testform" method="post" &gt; &lt;input type="text" id="name" name="name" /&gt; &lt;input type="text" name="age" /&gt; &lt;input type=&quo
formdata提交表单前后端代码
04-28
前端代码： 发送FormData可以使用原生的XMLHttpRequest对象，也可以使用ajax方法。下面以ajax方法为例： ``` // 获取表单元素和数据 let form = document.querySelector('#myForm'); let formData = new FormData(form); // ajax发送数据 let xhr = new XMLHttpRequest(); xhr.open("POST", "/submitform"); xhr.send(formData); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 请求完成后的处理代码 console.log(xhr.responseText); } } ``` 后端代码： 后端代码需要根据具体框架来进行处理，下面以Node.js Express框架为例： ``` const express = require('express'); const bodyParser = require('body-parser'); const app = express(); // 解析表单数据 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 处理post请求 app.post('/submitform', function(req, res) { let formData = req.body; console.log(formData); // 处理表单数据 // ... res.send('提交成功'); }); app.listen(3000, function() { console.log('服务器启动成功'); }); ``` 其中，body-parser中间件用于解析请求体中的表单数据。处理请求的函数中可以通过req.body获取表单数据。对于一些数据处理的逻辑可以根据具体需求进行编写。最后使用res.send()方法返回请求结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值