成功插入数据后如何关闭此模式？并且页面不应该被重定向到另一个页面

Question

索引.jsp

JavaScript：-

<script type="text/javascript">
            function myfunction()
            {
                var frm=$("#form1");
                frm.submit(function(){
                    $.ajax({
                       type: frm.attr('method'),
                       url:frm.attr('action'),
                       data: frm.serialize(),
                       success: function(){
                               $('#staticBackdrop').modal('toggle');
                               $('#successalert').show();
                       }  
                    });
               
                });
            };
        </script>

staticBackdrop 是模式 id，successalert 是当前隐藏的警报 id，成功后我想显示它。

索引.jsp

Modal 内部的表单代码。 modal 的 id 是staticBackdrop :-

<form action="Home"  name="form1" id="form1" >
    <div class="form-group">

             <input type="text" class="form-control" required="true" id="sub_name" name="sub_name" >

             <input type="text" class="form-control" required="true" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" name="subemail" id="subemail">

                  <input type="text" pattern="^[7-9]{1}[0-9]{9}$" max="10" class="form-control"  name="sub_number" id="sub_number">

             <button type="submit" onclick="myfunction()" class="btn btn-success">Submit</button>             
    </div>
</form>

在模式中，我有文本框来获取用户name, email, number 。 当用户click on submit button时，上面的ajax class应该将该数据发送到Home Controller ：-

Home Controller

@WebServlet(name="Home", urlPatterns={"/Home"})
public class Home extends HttpServlet {   
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
     Subcribe s=new Subcribe();
        s.email=request.getParameter("subemail");
        s.name=request.getParameter("sub_name");
        s.number= request.getParameter("sub_number");
        subcribeinsert(s);  //this method will insert into database 
    } 
}

但是，每当我单击提交按钮时，数据已成功插入数据库，但页面被重定向到空白页面url contains all data i was sending via ajax这是什么错误？ Url 是

http://localhost:8080/Jinal/Home?sub_name=example&subemail=emaple%40emaple.com&sub_number=9988776655

页面是空白的。 我只想关闭模式并保留在之前的页面上

Answer 1

您的页面正在重定向，因为您在表单中提到了 action='home'。 只需删除它，如果您不想要任何重定向，则不需要它。

<form ~~action="Home"~~ name="form1" id="form1" >

编辑：

还将按钮类型更改为“按钮”并从 JavaScript 中移除多余的材料。 由于您已经在使用 function，因此无需手动使用 call submit function。

编辑2：

无法查看您是如何进行更改的以及完整的文件，因此很难了解解决方案为何不起作用。 这就是为什么我要附加代码片段，对其进行测试，看看它是否可以在没有重定向的情况下工作，并在控制台中给出“是”消息。 然后根据你的代码修改它。 我已经成功注释了“模态”的代码 function 因为我没有任何模态。

<!DOCTYPE html>
<html>
  <head>
    <title>abc</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  
  <body>
      <form name="form1" id="form1" >
        <div class="form-group">
    
                <input type="text" class="form-control" required="true" id="sub_name" name="sub_name" >
    
                <button type="button" onclick="myfunction()" class="btn btn-success">Submit</button>             
        </div>
    </form>


    <script type="text/javascript">
      function myfunction()
      {
          var frm=$("#form1");
          $.ajax({
              type: frm.attr('method'),
              url:frm.attr('Home.html'),
              data: frm.serialize(),
              success: function(){                
                      //$('#staticBackdrop').modal('toggle');
                      //$('#successalert').show();
                      console.log("Yes")
              }  
          });
      }
  </script>
  </body>
</html>

成功插入数据后如何关闭此模式？并且页面不应该被重定向到另一个页面

问题描述

1 个解决方案

解决方案1
0 2020-07-20 12:52:39

成功插入数据后如何关闭此模式？ 并且页面不应该被重定向到另一个页面

问题描述

1 个解决方案

解决方案1 0 2020-07-20 12:52:39

成功插入数据后如何关闭此模式？并且页面不应该被重定向到另一个页面

解决方案1
0 2020-07-20 12:52:39