关于form表单提交数据后不跳转页面+ajax接收返回值的处理
1.前台的form表单建立,注意action、enctype的内容,
2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取iframe里的内容(即后台利用GSON传回来的返回值)。
代码部分:
<form id="form1" action="../PublishPostingsServlet" enctype="multipart/form-data" method="POST" target="iframe_userInterface">
<!-- 正文区域--多行文本框 -->
<textarea name="ptext" id="ptext" cols="30" rows="10"></textarea>
<!-- 图片和标签选择区域 -->
<ul id="ptext_ul">
<li>
<a id="photo" href="javaScript:;" onclick="showPic();">
<em class="iconfont"></em>图片
</a>
</li>
<li id="lable">
<a href="javaScript:;" onclick="showLable();">
<em class="iconfont"></em>标签
</a>
</li>
</ul>
<div id="tupianqu">
<span class="ziti">本地上传</span>
<input id="tupian_btn" name="tupian_btn" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="selectFile();" />
</div>
<button id="ptext_btn" type="submit">发布</button>
</form>
<iframe id="iframe_userInterface" name="iframe_userInterface" style="display: none;"></iframe>
3.js里获取文本代码如下:
$("#iframe_userInterface").load(function(){
var text = $(this).contents().find("body").text();//获取iframe里的内容
console.log(text);//打印iframe页面的内容
}
})
可以利用text来进行验证
后台要接收form表单传过去的数据,并且利用GSON将返回值传回到iframe里,
代码:
@WebServlet("/PublishPostingsServlet")
@MultipartConfig // 标识Servlet支持文件上传
public class PublishPostingsServlet extends HttpServlet {
private static final long serialVersionUID = 1L;// 主要用于版本控制
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置数据的编码方式为utf-8
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
// 返回的是项目在tomcat中的实际发布运行的根路径
String savePath = request.getServletContext().getRealPath("/picture");
Part part = request.getPart("tupian_btn");
String header = part.getHeader("content-disposition");// 获取请求头--form-data; name="tupian_btn"; filename=""
String fileName = getFileName(header);// 获取文件名
System.out.println("文件名:" + fileName);
part.write(savePath + File.separator + fileName);// 获取文件类型
/*判断登录状态*/
String id = null;
int result = 0;// 返回给前端的结果
HttpSession session = request.getSession();
id = (String) session.getAttribute("Account");
System.out.println("session里的id:" + id);
if (id == null) {
result = 4;// 当id为空的时候,登录失效,返回4
}
String ptext = request.getParameter("ptext");// 获取前台页面传递的参数
String label = Tools.getTable(ptext);
String ptime = Tools.getTime();
while (result == 0) {
result = PostingsService.publishPostings(id, ptext, ptime, label, fileName);// result接收数据在处理的结果1或2或3
}
Gson gson = new Gson();
String postinfsInfo = gson.toJson(result);// 定义postingsInfo存放GSON要传回的数据
response.getWriter().write(postinfsInfo);// 返回数据
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);// 调用doGet
}
}
关于form表单提交数据后不跳转页面+ajax接收返回值的处理的更多相关文章
- 向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分
原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...
- thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- form表单提交数据的数据格式
form表单提交的数据格式默认是 enctype="application/x-www-form-urlencoded"这样将input框的数据与input框的name属性以键值对 ...
- form表单提交没有跨域问题,但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法
MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交
随机推荐
- Flink与HanLP集成使用
自然语言处理是机器学习的一个重要分支,在智能翻译.智能问答.舆情监控.ChatOps等都有很好的应用场景,目前比较好的一个开源实现工具是何晗大神的HanLP,主页(http://hanlp.com/) ...
- java架构之路-(netty专题)netty的编解码(出入战)与粘包拆包
上次回归: 上次博客我们主要说了netty的基本使用,都是一些固定的模式去写的,我们只需要关注我们的拦截器怎么去写就可以了,然后我们用我们的基础示例,改造了一个简单的聊天室程序,可以看到内部加了一个S ...
- Python常用库 - logging日志库
logging的简单介绍 用作记录日志,默认分为六种日志级别(括号为级别对应的数值) NOTSET(0) DEBUG(10) INFO(20) WARNING(30) ERROR(40) CRITIC ...
- 动手学习Pytorch(6)--卷积神经网络基础
卷积神经网络基础 本节我们介绍卷积神经网络的基础概念,主要是卷积层和池化层,并解释填充.步幅.输入通道和输出通道的含义. 二维卷积层 本节介绍的是最常见的二维卷积层,常用于处理图像数据. 二维 ...
- redis说明及部署
一.reids 概述 redis全称REmote DIctionary Server.一个基于KV的持久化分布式数据库.所编写的语言为C.与另一个分布式缓存Memcached有几分相似 但是redis ...
- [redis读书笔记] 第一部分 数据结构与对象 对象特性
一 类型检查和多态 类型检查,即有的命令是只针对特定类型的,如果类型不对,就会报错,此处的类型,是指的键类型,即robj.type.下面为有类型检查的命令: 对于某一种类型,redis下底层的实 ...
- Java中类锁和对象锁
类锁 类锁 锁的其实是类的Class对象,类锁的代码写法是对类方法加synchronize,或者 synchronize(xx.class){} 对象锁 对象锁 锁的是类的实例对象,对象锁的形式有 对 ...
- OSPF笔记——LSA及其字段,及其作用
Link State ID Link State ID remains at 32 bits in length, Link State ID has shed any addressing sema ...
- Shell脚本 一键重启
有个程序必须用 kill -9 pid号 关闭后,才能重新启动,每次都要手动查找pid号,麻烦容易出错,写个shell脚本 就三行很方便,自动查找pid号-关闭程序-重启程序 #!/bin/bas ...
- 前端工具配置(webpack 4、vue-cli 3)
随着前端项目复杂度的增加,其所依赖的资源也越来越多,从最初的HTML文件,CSS文件,JS文件发展到现在的各种预处理文件,模板文件等等.文件多了,项目大了,项目的维护就变得更加困难了,用户加载页面的速 ...