不能重新提交多次在jquery.ajax（submittion工作僅一次）

-1

如果我進入細節，當我按下「添加課程」按鈕，它也加入到數據庫和表被裝入新的輸入，而不會重定向不能重新提交多次在jquery.ajax（submittion工作僅一次）

如果我按重定向圖標，它會再次加載相同的表單。但是，當我再次按了第二次「添加課程」，該頁面被刷新，並沒有得到分貝更新

下面我包括我的值編碼... 在此先感謝..

的index.jsp

<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="js/jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $("#flip").click(function(){ 
        $("#panel").slideToggle(); 
        $('#listpanel').load('load_course.jsp'); 
        $("#listpanel").hide(); 
        $("#listpanel").show("2000"); 
       }); 
       $("#listflip").click(function(){ 
        $('#listpanel').load('load_course.jsp'); 
        $("#listpanel").slideToggle(); 

       }); 
      }); 

     </script> 
     <style> 
      table{ 
       width: 100%; 
      } 
      #submit{ 
       width: 100%; 
      } 
      #panel,#flip{ 
       //padding:5px; 
       width: 25%; 
       text-align: left; 
       font-size: 17px; 
       background-color: linen; 
       //border: solid 1px #3498db; 
      } 
      #flip { 
       background-color: white; 
       cursor: default; 
       //display: none; 
      } 

      #listpanel,#listflip{ 
       //align: center; 
       //padding:5px; 

       text-align: center; 
       //background-color: #f1f1f1; 
       //border: solid 1px #3498db; 
      } 
      #listflip { 
       //padding: 5px; 
       border: solid 2px darksalmon; 
       //display: none; 
      } 
      .reload{ 
       font-size:35px; 
       cursor:pointer; 
      } 
      .reload:hover{ 
       color:darkgoldenrod; 
      } 
     </style> 

    </head> 
    <body onload="loadpanel()"> 
     <p id="flip" ><b>Click here to add course</b><hr></p> 
      <div id="panel" > 
       <div id="form"> 
        <%@include file="formtab.html" %> 
       </div>    
       <div id="listpanel"></div> 
       <p id="listflip">list courses</p> 
      </div> 
    <script> 
      $(document).ready(function(){ 
       $("form").submit(function (e) { 
        e.preventDefault(); 
        var formId = this.id; // "this" is a reference to the submitted form 
        if(formId=="courseform") 
        { 
         var code = $("input#ccode").val(); 
         var name = $("input#cname").val(); 
         var dataString = 'ccode='+ code + '&cname=' + name; 

         $.ajax({ 
          type: "POST", 
          url: "submit", 
          data: dataString, 
          success: function() { 
           $('#listpanel').load('load_course.jsp'); 
           $("#listpanel").hide(); 
           $("#listpanel").show("2000"); 
           $('#form').html("<div id='message'></div>"); 
           $('#message').html("<center><br><b class='reload' id='reload' onclick='load_again();'>&#8634;</b></center>") 
           .hide() 
           $("#message").fadeIn("12000"); 
          } 

         }); 
         return false; 
        } 


       }); 
      }); 
      function load_again() 
      { 
       //$("#message").remove(); 
       //$("#reload").remove(); 
       $('#form').load('formtab.html'); 
      } 
      function loadpanel() 
      { 
       $("#panel").hide(); 

      } 
     </script> 

    </body> 
</html>

formtab.html

<form method="post" action="index.jsp" id="courseform"> 
        <table><tr> 
          <td><input type="text" name="ccode" id="ccode" placeholder="Code" maxlength="5" size="5" required></td> 
          <td><input type="text" name="cname" id="cname" placeholder="Course Name" required></td></tr> 
         <tr><td colspan="2"><input type="submit" value="Add course" id="submit"></td></tr></table> 
     </form>

load_course.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@ page import="java.sql.*" %> 
<% 
try{ 
      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con = DriverManager.getConnection("jdbc:mysql://localhost/crm","root",""); 
      Statement st=con.createStatement(); 
      ResultSet resultset=st.executeQuery("select * from course where 1"); 
      int count=0; 
      resultset.last(); 
      count=resultset.getRow(); 
      resultset.beforeFirst(); 
      if(count>0){ 
      %> 
      <table border="1"> 
       <tr><th>Course Code</th><th>Course Name</th></tr> 
      <% 
      while(resultset.next()) 
      { 
       %> 
       <tr><td><%=resultset.getString(1)%></td><td><%=resultset.getString(2)%></td></tr> 
       <% 
      } 
      %> 
      </table> 
      <% 
      } 
      else{ 
       out.print("<br>No Course Added Yet <br>"); 
      } 

      st.close(); 
      con.close(); 
      resultset.close(); 
     } 

catch(Exception e) 
{ 
    out.print(e); 
} 
%>

submit.java

import java.io.IOException; 
import java.io.PrintWriter; 
import java.sql.*; 
import javax.servlet.RequestDispatcher; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
public class submit extends HttpServlet { 
    @Override 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     PrintWriter out=response.getWriter(); 
     String ccode=request.getParameter("ccode"); 
     String cname=request.getParameter("cname"); 
     try{ 
      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost/crm","root",""); 
      Statement st=con.createStatement(); 
      int flag=0; 
      flag=st.executeUpdate("insert into course values('"+ccode+"','"+cname+"')"); 
      if(flag>0) 
      { 

       out.print("course added"); 
      } 
      st.close(); 
      con.close(); 
     } 
     catch(ClassNotFoundException | SQLException e) 
     { 
      out.print(e); 
     } 



    } 

}

來源

2017-10-21 Sahal

試試這個AJAX方法：的$（document）。在（「點擊」，「#clickID」，函數（）{// 您的代碼 }）; – Gopal

@Gopal感謝...它的工作 – Sahal

據提交一次....所以我通過再次使用做了一些更改，如，每當我按下重新加載圖標將會加載該頁面'location.reload（）'。現在它的正常工作

來源

2017-10-22 07:11:37 Sahal

不能重新提交多次在jquery.ajax（submittion工作僅一次）

回答

相關問題