关于form表单提交数据后不跳转页面+ajax接收返回值的处理

2021-04-20 22:28

阅读:328

标签:pos   建立   sse   inpu   oid   标识   tom   extends   extend   

1.前台的form表单建立,注意actionenctype的内容,

2.通过添加一个隐藏的iframe标签使formtarget指向iframe来达到不跳转页面的效果,同时需要在js里获取iframe里的内容(即后台利用GSON传回来的返回值)。

代码部分:

action="../PublishPostingsServlet"
  enctype="multipart/form-data"  method="POST"  target="iframe_userInterface">

                

                

                

                

                        

  •                         

                                图片

                            

                        

                        

  •                         

                                标签

                            

                        

                    

                    

                本地上传

           

                    

                    

                

                

    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接收返回值的处理

    标签:pos   建立   sse   inpu   oid   标识   tom   extends   extend   

    原文地址:https://www.cnblogs.com/-217/p/12255152.html


  • 评论


    亲,登录后才可以留言!