问题描述

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

解决方法

方法一:

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

导入
jquery
jquery-form.js

如下: 一个上传文件的form

<form id="form1" action="/shop/updateUserinfo" 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>

js实现

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

请求的url在form的action中定义,获取到的后台数据是JSON格式$(function ())不套在外面,里面的这个请求函数没法自启动后台代码无差异

方法二:

使用ajax来发送请求提交表单

前端页面:

<form id="userInfo" >
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="请输入姓名">
</div>
</div>
<div class="weui-cell ">
<div class="weui-cell__hd">
<label class="weui-label">年龄</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" id="age" name="age" type="number" placeholder="请输入年龄">
</div>
</div>
<div class="weui-cell ">
<div class="weui-cell__hd">
<label class="weui-label">地址</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" id="address" name="address" type="text" placeholder="请输入地址">
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">确定</a>
</div>
</form>

ajax请求发送数据

$("#saveUserInfo").click(function() {
var formObject = {};
var formArray =$("#userInfo").serializeArray();
$.each(formArray,function(i,item){
formObject[item.name] = item.value;
});
$.ajax({
url:"user/addUser",
type:"post",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(formObject),
dataType: "json",
success:function(data){
alert(data.msg);
},
error:function(e){
alert("错误!!");
}
});
});

注意

如果仅仅粗糙的使用ajax的话,那就是 $("#submit").ajax(…), 很显然里面的发给后台的数据data很难传输文件。最初,ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传。

参考

Form表单提交,Ajax请求,$http请求的区别

Form表单获取后台返回数据

form表单ajax提交json数据

什么是单工、半双工和双工通信(最详细)

单工,半双工和全双工有何区别和联系?

使用form表单提交请求如何获取后台返回的数据?的更多相关文章

  1. 通过form表单上传文件获取后台传来的数据

    小伙伴是不是遇到过这样的问题,通过submit提交form表单的时候,不知怎么获取后台传来的返回值.有的小伙伴就会说你不会发送ajax,其实也会.假如提交的form表单中含有文件,怎么办? 步骤1:想 ...

  2. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  3. 前后端交互技术之servlet与form表单提交请求及ajax提交请求

    1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...

  4. Jobs(三) HTML的form表单提交中文后,后台取出乱码的问题

    解决form表单中提取的中文在后台乱码的问题有两种情况: form表单以GET方式提交: form表单以POST方式提交 一. 解决以GET方式提交的中文乱码问题,可以更改Tomcat服务器的配置文件 ...

  5. thinkPHP form表单提交参数无法获取

    后台打印获取的数据为empty, 找了半天,是因为 input标签没有写name, 真是醉了!记一下,免得以后再犯错了.

  6. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

  7. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  8. form表单提交,后台怎么获取select的值?后台直接获取即可,和input方式一样。

    form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...

  9. 非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

    非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

随机推荐

  1. CDOJ 1070 秋实大哥打游戏 带权并查集

    链接 F - 秋实大哥打游戏 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Submit ...

  2. java agent问题

    Error occurred during initialization of VMagent library failed to init: instrumentobjc[36987]: Class ...

  3. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  4. [BZOJ5463][APIO2018]铁人两项:Tarjan+圆方树

    分析 根据题目中的要求,从\(s\)出发前往\(f\)一定可以,并且只可能经过这两个结点所在的点双连通分量和它们之间的点双连通分量,因此切换点\(c\)只能从这些点中选取. 建出圆方树后,因为圆方树上 ...

  5. Spring Cloud架构教程 (三)服务网关(基础)

    通过之前几篇Spring Cloud中几个核心组件的介绍,我们已经可以构建一个简略的(不够完善)微服务架构了.比如下图所示: alt 我们使用Spring Cloud Netflix中的Eureka实 ...

  6. 学习日记21、IE下的Ajax需要注意的地方

    上面这张图片我是封装了一个easyui下拉框,红框出则是动态传入的json数据,这串代码在google下运行不会有任何问题,但是在IE下运行则会提示缺少:,这是因为IE只识别json格式的数据,所以这 ...

  7. [BZOJ2729]:[HNOI2012]排队(组合数学)

    题目传送门 题目描述 某中学有n名男同学,m名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不同的) ...

  8. Java字符串的不可变性

    声明一个字符串引用变量: String  s = "abcd"; s是一个引用变量,指向 堆内存中的字符串常量 "abcd" 再声明一个字符串引用变量: Str ...

  9. 如何用CSS3画出懂你的3D魔方?

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

  10. long poll、ajax轮询和WebSocket

    websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享.废话这么多了,最后再赞一个~ WebSocket是出的东西(协 ...