使用formdata,将数据通过ajax提交到后端

本文介绍如何使用FormData对象处理表单数据并提交至后台,重点讲解了如何避免jQuery默认处理数据导致的问题,包括设置jQuery的 processData 和 contentType 参数。

formdata如何使用?

场景
开发商场站时 利用隐藏域将用户的下单有关信息 提交至后台
由于 隐藏域 信息 太多,所以使用formdata对象直接将 数据打包 发送,这里记录下 使用注意事项

踩到的坑 :
没有禁用jquery的数据处理功能 导致后台接受到的数据 无法使用

function submit_Order()
{
        //读取信息
        var hiddenForm = new FormData() //创建FormData对象  
        //说明 : FormData 还有个重载的构造函数,允许直接传入一个表单的DOM
        $('#form-hidden :input:hidden').each(function(i,obj){
            //使用append方法 append(key,value)
            hiddenForm.append(obj.name,obj.value) //使用append方法 结合each 添加数据
            //说明 要查看添加的数据是否存在 应该 使用 hiddenForm.get(key) 查看
        })
        //提交数据
        $.ajax({
            url  : "****",
            type : "post",
            dataType : 'json',//服务端返回的数据类型 
            data : hiddenForm,//发送formdata对象

            //由于XMLHttpRwquest可以处理 FormData对象
            //所以这里要做以下几个操作

            cache: false,.//由于信息涉及到隐私,禁止浏览器将数据缓存(根据需求使用)
            processData: false, //告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头"application/x-www-form-urlencoded",//直接用对象接收时,必须这么写;若要发送json格式数据,可写成“application/json”,用注解@RequestBody String str接收  

            success : function(_json_)
            {
                       /*
                           逻辑代码
                       */
            }
        )}
}
在 JavaScript 中,通过 AJAX 提交表单数据后端是一种常见的做法,可以实现页面无刷新提交数据。以下是两种常用的方法:使用 jQuery 和使用原生的 `XMLHttpRequest` 或 `fetch` API。 ### 使用 jQuery 提交表单数据 jQuery 简化了 AJAX 请求的编写过程。可以使用 `$.ajax()` 或更简洁的 `$.post()` 方法来提交数据。 #### 示例:使用 `$.ajax()` 提交表单数据 ```javascript function submitForm() { var formData = $('#myForm').serialize(); // 将表单数据序列化为字符串 $.ajax({ type: 'POST', url: '/submit', // 后端接收数据的 URL data: formData, dataType: 'json', success: function(response) { if (response.success) { alert('提交成功'); } else { alert('提交失败'); } }, error: function() { alert('请求异常'); } }); } ``` #### HTML 表单示例 ```html <form id="myForm" onsubmit="submitForm(); return false;"> <label>用户名:<input type="text" name="username"></label><br> <label>密码:<input type="password" name="password"></label><br> <input type="submit" value="提交"> </form> ``` ### 使用原生 JavaScript 提交表单数据 如果不想依赖 jQuery,也可以使用原生 JavaScript 实现 AJAX 提交。 #### 使用 `fetch` API 提交表单数据 `fetch` 是现代浏览器支持的一种更现代化的方式,它返回一个 Promise。 ```javascript function submitFormWithFetch() { var form = document.getElementById('myForm'); var formData = new FormData(form); // 构建表单数据对象 fetch('/submit', { method: 'POST', body: formData }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { alert('提交成功'); } else { alert('提交失败'); } }) .catch(function(error) { alert('请求异常'); }); } ``` #### 使用 `XMLHttpRequest` 提交表单数据 ```javascript function submitFormWithXHR() { var form = document.getElementById('myForm'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', '/submit', true); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert('提交成功'); } else { alert('提交失败'); } } else { alert('请求失败'); } }; xhr.onerror = function() { alert('网络错误'); }; xhr.send(formData); } ``` ### 注意事项 - 在使用 `FormData` 时,确保 `<form>` 标签中包含 `enctype="multipart/form-data"`,以便正确处理文件上传。 - 如果后端返回的是 JSON 数据,需要设置 `dataType: "json"`(jQuery)或手动解析响应内容(原生 JavaScript)[^3]。 - 对于复杂的表单验证和交互逻辑,建议使用成熟的前端框架(如 Vue、React)结合 AJAX 进行开发。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值