2017-11-24 7 views
0

안녕하세요 저는 Ajax를 사용하여 동일한 페이지에 출력을 표시하는 프로젝트를 진행하고 있습니다. 여기에는 사용자 입력을 받아 입력을 데이터베이스에 저장하는 JSP 양식이 포함되어 있으며 응답으로 성공 메시지를 표시하려고합니다.Ajax를 사용하여 같은 페이지에서 응답을 얻지 못했습니다.

하지만 같은 페이지에서 메시지를 받고 있지 않습니다.

JSP 코드 : get 및 post 메서드를 모두 사용했지만 사용하지 않으려 고 시도했습니다. 추가 버튼을 클릭하면 같은 페이지에 레코드가 성공적으로 삽입되었지만 다른 페이지에 메시지가 표시되면 성공 메시지가 표시됩니다.

문제를 해결하는 데 도움을주십시오. Ajax를 처음 사용할 때입니다. web.XML 파일을 변경해야합니까?

<!DOCTYPE html> 
    <html> 

      <head> 
      <title>Courses</title> 


      <script> 
       var request; 
       function addDetails(){ 
        request=new XMLHttpRequest(); 
        request.onreadystatechange()=getResult(); 
        var cid=document.getElementById("cid").value; 
        var name=document.getElementById("name").value; 
        var syllabus=document.getElementById("syllabus").value; 
        var duration=document.getElementById("duration").value; 
        var fees=document.getElementById("fees").value; 

        request.open("get","Courses?cid="+cid,"name="+name,"syllabus="+syllabus,"duration="+duration,"fees="+fees,true); 
        //request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
        //request.send(cid&name&syllabus&duration&fees); 
        request.send(); 
       } 

       function getResult(){ 
        if(request.readyState===4&&request.status===200){ 
         var result=request.responseText(); 
         document.getElementbyID("output").innerHTML=result; 
        } 
        else{ 
         document.getElementbyID("output").innerHTML="Error"; 
        } 

       } 



       </script> 
       <style> 
       body { 
        text-align:center; 
       } 
       h1 { 
        font-size:30px; 
        font-weight:bold; 
        color:peru; 
       } 
       pre { 

        font-size:20px; 
        font-weight:bold; 
        color:black; 
       } 

      </style> 
     </head> 
     <body> 
      <h1>Course Information</h1><br/> 
      <form action="Courses" method="Post"> 
       <pre> 
      Course ID : <input type="text" name="cid" id="cid" style="width:400px"/><br/> 
      Course Name : <input type="text" name="name" id="name" style="width:400px"/><br/> 
      Syllabus  : <input type="text" name="syllabus" id="syllabus" style="width:400px"/><br/> 
      Duration  : <input type="text" name="duration" id="duration" style="width:400px"/><br/> 
      Fees   : <input type="text" name="fees" id="fees" style="width:400px"/><br/> 
      <input type="submit" name="Add" value="Add" onclick="addDetails()"/> <input type="submit" name="Update" value="Update"/> <input type="submit" name="Delete" value="Delete"/> 
      <p id="output"></p> 
       </pre> 
      </form> 
     </body> 
    </html> 

` 서블릿 코드

`

: -

package ss; 

import java.io.IOException; 
import java.io.PrintWriter; 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.PreparedStatement; 
import java.sql.SQLException; 
import java.util.logging.Level; 
import java.util.logging.Logger; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

public class Courses extends HttpServlet { 

     protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     response.setContentType("text/html;charset=UTF-8"); 
     PrintWriter out = response.getWriter(); 
      try{ 
      String cid=request.getParameter("cid"); 
      String name=request.getParameter("name"); 
      String syllabus=request.getParameter("Syllabus"); 
      String duration=request.getParameter("duration"); 
      String fees=request.getParameter("fees"); 

      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/ssi","root","root17"); 

      if(request.getParameter("Add")!=null){ 
       String qry="insert into course values(?,?,?,?,?)"; 
       PreparedStatement ps=con.prepareStatement(qry); 
       ps.setString(1, cid); 
       ps.setString(2, name); 
       ps.setString(3, syllabus); 
       ps.setString(4, duration); 
       ps.setString(5, fees); 
       int i=ps.executeUpdate(); 
        if(i>0){ 
         out.println("Registered Successfully"); 
        } 
        else{ 
         out.println("Registration Fails"); 
        } 
      } 

     if(request.getParameter("Update")!=null){ 
      String qry="UPDATE course SET Name=?,Duration=?, syllabus=?, fees=? where cid=?"; 
      PreparedStatement ps=con.prepareStatement(qry); 
      ps.setString(1,name); 
      ps.setString(2,duration); 
      ps.setString(3,syllabus); 
      ps.setString(4, fees); 
      ps.setString(5, cid); 
      int i=ps.executeUpdate(); 
      if(i>0){ 
       out.println("Updated Successfully"); 
       out.println(i); 

      } 
      else{ 
       out.println("Update fails"); 
      } 
     } 
     if(request.getParameter("Delete")!=null){ 
      String qry="Delete from course where cid=?"; 
      PreparedStatement ps=con.prepareStatement(qry); 
      ps.setString(1, cid); 
      int i=ps.executeUpdate(); 
      if(i>0){ 
       out.println("Record Deleted"); 
      } 
      else{ 
       out.println("Delete Fails"); 
      } 
     } 
     } 
      catch(Exception e){ 
       out.println(e); 
      } 

      } 


} 

답변

0

당신은 제출 버튼에 addDetails를 부착된다. 그것이 클릭 될 때 당신이 가장하고 싶지 않은 페이지를 제출할 것입니다. 형식을 단추로만 변경하십시오 : <input type="button" name="Add" value="Add" onclick="addDetails()"/>.

+0

답장을 보내 주셔서 감사합니다. 유형 = "버튼"을 변경했으나 결과가 여전히 표시되지 않습니다. 이제 페이지도 새로 고침되지 않습니다. 페이지는 동일하지만 출력되지 않습니다. 데이터를 보내는 동안 실수를 저지르고 있습니까? – user8411341

+0

답장을 보내 주셔서 감사 드리며 이에 따라 변경 사항도 작성했습니다. 이제 페이지는 동일하게 유지되지만 여전히 메시지가 표시되지 않습니다. – user8411341

+0

이제 JavaScript 문제가 발생할 가능성이 큽니다. 먼저 서블릿을 호출하는지 확인하십시오. 그런 다음 실제 스크립트의 디버깅을 시작하고 실제로'ouput' 요소를 업데이트하는 시점에 도달했는지 확인하십시오. 크롬 개발자 도구에서 JavaScript를 디버깅하거나 "alert"호출을 호출하여 디버깅 할 수 있습니다. – tsolakp