使用form表单提交请求（文件）如何获取后台返回的数据

最新推荐文章于 2024-05-21 21:35:00 发布

吾行远方

最新推荐文章于 2024-05-21 21:35:00 发布

阅读量1.8w

点赞数 7

分类专栏：前端文章标签： form表单提交文件获取后台数据

本文链接：https://blog.csdn.net/wxyf2018/article/details/100042415

版权

问题描述
一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。
想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。

解决方法

1、使用 JQuery

jQuery封装了一个form表单提交有回调功能的方法

导入
jquery
jquery-form.js

获取：jquery.form.js
链接：https://pan.baidu.com/s/1J3gGpDx99K58cD9LZ_XIvw
提取码：p9qt

获取：jquery.js
链接：https://pan.baidu.com/s/1ZgDQ_EaXOGFE13xVyMF7qg
提取码：50wa

案例

form上传文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>导入文件</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jquery.form.js"></script>

</head>
<body>
	<form id="form1" action="/test/updload" enctype="multipart/form-data" method="post">
	        <table>
	            <tr>
	                <td>请选择头像:</td>
	                <td><input type="file" name="image"/></td>
	            </tr>
	            <tr>
	                <td><input type="submit" name="submit" value="提交"/></td>
	                <td><input type="reset" name="reset" value="重置"/></td>
	            </tr>
	        </table>
	</form>
</body>
</html>

// $(function ())是文档document加载完自动调用的函数
$(function () {
   
    /*
     获取form元素，调用其ajaxForm(...)方法
     内部的function(data)的data就是后台返回的数据
    */
    $("#form1").ajaxForm(function (data) {
   
            console.log(data

最低0.47元/天解锁文章

吾行远方

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
使用form表单提交请求（文件）如何获取后台返回的数据

问题描述一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。解决方法1、使用 JQueryjQuery封装了一个form表单提交有回调功能的方法导入jqueryjquery-form.js获取：jquery.form.js链接：http...
复制链接

扫一扫