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接收返回值的处理的更多相关文章

  1. 向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

    原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...

  2. thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  3. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  4. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  5. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  6. form表单提交数据的数据格式

    form表单提交的数据格式默认是 enctype="application/x-www-form-urlencoded"这样将input框的数据与input框的name属性以键值对 ...

  7. form表单提交没有跨域问题,但ajax提交存在跨域问题

    浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

  8. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  9. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

随机推荐

  1. vue文件引入全局样式导致样式重复

    通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...

  2. 微信小程序面试题总结

    A类问题 1 请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App.js 设置一些全局的基础数据等: App ...

  3. tar命令详解及使用实例

    tar命令 [root@linux ~]# tar [-cxtzjvfpPN] 文件与目录 …. 参数: -c :创建压缩文件 -x :解开压缩文件 -t :查看tar包里面的文件! 上面3个参数只能 ...

  4. Linux tcpdump 命令详解与示例

    命令概要 Linux作为网络服务器,特别是作为路由器和网关时,数据的采集和分析是不可少的.TcpDump 是 Linux 中强大的网络数据采集分析工具之一. 用简单的话来定义tcpdump,就是:du ...

  5. Spring中的可扩展接口

    1.监听器Listener(点此连接,执行流程带源码分析及demo) 2.bean定义的后置处理器(BeanDefinitionRegistryPostProcessor)和bean工厂的后置处理器( ...

  6. C#开源组件DocX处理Word文档基本操作(一)

    C#中处理Word文档,是大部分程序猿绕不过的一道门.小公司或一般人员会选择使用开源组件.目前网络上出现的帖子,大部分是NPOI与DocX,其它的也有.不啰嗦了,将要使用DocX的基本方法贴出来,供参 ...

  7. 2Nginx+keepalive+2tomcat 故障转移

    根据真实生产环境 总结. 硬件:共计2台Linux服务器  76和77  每台服务器都安装 Nginx  Keepalive  Tomcat80作为虚拟ip,负责对外连接.   78和79是两台mys ...

  8. 杭电-------2043密码(C语言写)

    #include<stdio.h> #include<string.h> ]; ] = { '~','!','@','#','$','%','^' }; ] = { }; in ...

  9. VMware ESXi 6.7安装过程介绍

    虚拟机配置信息如下: 一.安装ESXI 开启虚拟机,正常进入开机引导安装界面 默认选择第一个选项,8s后自动进入如下界面,依次为: 加载引导程序 接受协议 选择用来存放ESXI操作系统的磁盘,不能乱选 ...

  10. java开发规范学习

    from 慕课网-明明如月-<阿里巴巴的Java开发手册> Integer缓存问题分析 1, Integer缓存[-128, 127]的数字,除此之外,将通过new创建. Long也是缓存 ...