При нажатии ajax модальная кнопка boostrap onclick не работает - PullRequest
Новая
       7

При нажатии ajax модальная кнопка boostrap onclick не работает

0 голосов
/ 30 сентября 2018

Я занимаюсь разработкой веб-приложения для своего колледжа под названием Система мониторинга студентов с jsp в качестве внешнего интерфейса и базой данных h2 в качестве внутреннего.У меня есть модальный, который сохраняет детали курса в базу данных.Когда я нажимаю кнопку отправки в модале, модал должен вызвать функцию ajax, чтобы выполнить задачу, которую я вызвал через событие onclick в кнопке.Событие onclick срабатывает, если я помещаю обычное сообщение с предупреждением в функцию js, но не работает, когда выполняется вызов 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 page: 

<%  
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));
}
%>

1 Ответ

0 голосов
/ 30 сентября 2018

Для вашего jsp кода необходимо исправить некоторые ошибки:

a.при сравнении строки необходимо использовать equals() вместо ==

b.когда вы вставляете данные, вам нужно использовать executeUpdate() вместо executeQuery(), поэтому ResultSet теперь бесполезно

c.Неправильно записывать значение параметра непосредственно в sql, поскольку это может привести к SQL-инъекции , вам лучше использовать Подготовленный оператор для установки параметра

Кроме того, нехорошо записывать служебный код в скрипт jsp, вы можете выучить 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));
}
%>
...