不能重新提交多次在jquery.ajax(submittion工作仅一次)
问题描述:
如果我进入细节,当我按下“添加课程”按钮,它也加入到数据库和表被装入新的输入,而不会重定向不能重新提交多次在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();'>↺</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);
}
}
}
答
据提交一次....所以我通过再次使用做了一些更改,如,每当我按下重新加载图标将会加载该页面'location.reload()'。 现在它的正常工作
试试这个AJAX方法: 的$(document)。在( “点击”, “#clickID”,函数(){// 您的代码 }); – Gopal
@Gopal感谢...它的工作 – Sahal