Question

我正在为我的大学开发一个Web应用程序，称为学生监控系统，以jsp为前端，以h2数据库为后端。我有一个将课程详细信息保存到数据库的模式。当我单击模式中的Submit按钮时，模式应调用ajax函数来执行我通过按钮中的onclick事件调用的任务。如果我在js函数中放置了正常的警报消息，则会触发onclick事件，但在进行ajax调用时不起作用。下面是我的代码。

MODAL：

 <link rel="stylesheet" href="BSTemplate/3.3.7/css/bootstrap.min.css">
 <script src="Scripts/JQuery/3.3.1/jquery.min.js"></script>
 <script src="BSTemplate/3.3.7/js/bootstrap.min.js"></script>
 <!-- Course Modal -->
 <div class="modal fade" id="courseModal">
 <div class="modal-dialog">
 <div class="modal-content">

 <!-- Modal Header -->
 <div class="modal-header" style="background: green">
    <h4 class="modal-title">ADD COURSE</h4>
 </div>

 <!-- Modal body -->
 <div class="modal-body">
 <form role="form">

 <div class="form-group form-inline">    
    <label for="course_name" class="control-label col-sm-5" style="text-align: left">Course Name:</label> 
    <input type="text" id="course_name" name="course_name" class="form-control" required/><br><br>
 </div>
 <div class="form-group form-inline">    
    <label for="course_code" class="control-label col-sm-5" style="text-align: left">Course Code:</label> 
    <input type="text" id="course_code" name="course_code" class="form-control" style="width: 195px" value="" /><br><br>
 </div>    
 <div class="form-group form-inline">    
     <label for="course_duration" class="control-label col-sm-5" style="text-align: left"> Course Duration:</label> 
     <input type="number" id="course_duration" name="course_duration" class="form-control" style="width: 195px" value="" /><br><br>        
 </div>
 <div class="form-group form-inline" >    
     <label for="department" class="control-label  col-sm-5" style="text-align: left">Department:</label> 
     <input type="text" id="department" name="department" class="form-control"/><br><br>
 </div>
 <div class="form-group form-inline">
     <label for="lateral" class="control-label col-sm-5" style="text-align: left">Lateral:</label> 
     <input type="radio" id="lateral" name="lateral" class="col-sm-1" value="Allowed"><b>Allowed</b>
     <input type="radio" id="lateral" name="lateral" class="col-sm-1" value="Not Allowed"><b>Not Allowed</b>
    </div>
    </form>       
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
        <input id="btn_save" name="btn_save" type="button" class="btn btn-primary submitBtn" onclick="ins_course();" value="Submit">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div></div></div></div></div>

AJAX：

function ins_course(){    
$.post("Department.ajax.jsp",
{ 
  method: 'ins_course',
  course_code: document.getElementById("course_code").value,
  course_name: document.getElementById("course_name").value,
  department: document.getElementById("department").value,
  duration: document.getElementById("course_duration").value,
  lateral: document.getElementById("lateral").value
},function(data,status){
  alert("Data: " + data.trim());
});
}

jsp页面：

<%  
if(request.getParameter("method")=="ins_course")
{
String course_code=request.getParameter("course_code");
String course_name=request.getParameter("course_name");
String department=request.getParameter("department");
int duration=Integer.parseInt(request.getParameter("duration"));
int semesters=duration*2;
String lateral=request.getParameter("lateral");

String sql="INSERT INTO courses (course_code,course_name,department, 
duration, semesters,lateral)"+ "VALUES ('"+course_code+"','"+course_name+ 
"','"+department+"',"+course_duration+","+semesters+",'"+lateral+"');";

Statement st=con.createStatement();
ResultSet rs = st.executeQuery(sql);
rs.next();
out.print(rs.getLong(1));
}
%>

Answer 1

对于您的jsp代码，有一些错误需要纠正：

a。比较字符串时，您需要使用equals()而不是==

b。插入数据时，您需要使用executeUpdate()而不是executeQuery()，因此ResultSet现在无用了

c。直接在sql中写参数值是一个不好的做法，因为它可能会导致 SQL注入，最好使用 Prepared Statement 设置参数

此外，将服务代码写入jsp scriptlet也不好，您可以学习 MVC Design Pattern 并在您的应用程序中使用它

<%  
if(request.getParameter("method").equals("ins_course")) //use equals instead of ==
{
String course_code=request.getParameter("course_code");
String course_name=request.getParameter("course_name");
String department=request.getParameter("department");
int duration=Integer.parseInt(request.getParameter("duration"));
int semesters=duration*2;
String lateral=request.getParameter("lateral");

String sql="INSERT INTO courses (course_code,course_name,department, 
duration, semesters,lateral)"+ "VALUES ('"+course_code+"','"+course_name+ 
"','"+department+"',"+course_duration+","+semesters+",'"+lateral+"');";

Statement st=con.createStatement();
st.executeUpdate(sql);//use executeUpdate instead of executeQuery
//rs.next();remove this code
//out.print(rs.getLong(1));
}
%>

当ajax调用时，boostrap模态按钮onclick不起作用

1 个答案: