텍스트 상자의 변경 내용이 웹 페이지에 반영되지 않았습니다.

Question

getDetails 버튼을 누르면 웹 페이지의 필드를 채워야합니다. 나는 입력으로 registration id을 제공하며,이를 기반으로 데이터베이스에 대한 요청이 이루어진다. 내가받는 응답은 다양한 분야에 표시되어야합니다.

원하는 응답을 받고 응답을 올바로 처리하고 있습니다 (Google 크롬 옵션 inspect element을 사용하여 확인). 또한 검사 요소를 사용하여 jsp 코드 디버깅을 시도하고 응답의 모든 값이 올바르게 설정되어 있지만 컨트롤이 요청의 콜백 메서드를 전달할 때 웹 페이지가 새로 고쳐지고 URL이 http://localhost:8080/ReportFetcher/FirstJSP.jsp?regid=2&regIdsubmitbutton=getDetails&Class=0

난이 페이지는 또한 다운 한 방울을 선택한 후에, 요청이 제기 된 다운 동적 드롭을 갖고, 응답 처리 및 다른 드롭 다운 채워져 있기 때문에 http://localhost:8080/ReportFetcher/FirstJSP.jsp?

것으로 기대하고있는 반면

.

이 시나리오는 정상적으로 작동하므로 첫 번째 경우에 페이지 URL이 변경되는 이유를 파악할 수 없습니다. 또한 참고 포인트는 첫 번째 경우에 나는 웹 페이지의 다양한 요소에 설정된 값을 볼 수있는 첫 번째 경우에 페이지를 넣을 때, (내 opinon에서) 값이 먼저 설정되고 페이지가 새로 고쳐 지므로 이전에 지우기가 발생한다는 것을 의미합니다 데이터를 설정합니다.

function funcOnChange(reqElement) { 
     var valueSelected = null; 
     if (reqElement.name == "Class") { 
      valueSelected = reqElement.value; 
      document.detail.regid.disabled = true; 
     } else if (reqElement.name == "regIdsubmitbutton") { 
      valueSelected = "R" + document.detail.regid.value; 
     } 

     document.detail.Section.options.length = 0; 

     if (reqElement.name == "Class" && valueSelected == "None") { 
      document.detail.Section.disabled = true; 
      return; 
     } 
     var xhr = new XMLHttpRequest(); 

     xhr.onreadystatechange = function() { 
      // Check to see if this state change was "request complete", and 
      // there was no server error (404 Not Found, 500 Server Error, etc) 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       var substring = xhr.responseText; 
       if (reqElement.name == "regIdsubmitbutton") { 
        parseResponse(substring); 
       } else { 
        document.detail.Section.disabled = false; 
        // loop to update the drop down 
        var pos = doActivateSection(substring); 
        generateTable(substring, pos); 
       } 
      } 
      if (xhr.readyState == 404) { 
       alert("404 error"); 
      } 
      if (xhr.readyState == 500) { 
       alert("500 error"); 
      } 

     } 

function parseResponse(response) { 
    var name = 0, standard = 1, section = 2, rollno = 3, subject = 4, total_type = 5; 

    var pos; 
    var result = []; 
    var data = []; 
    var type = 0; 
    while (type < total_type) { 
     switch (type) { 
     case name: 
      result = readSegment(response, -1); 
      break; 

     case standard: 
      result = readSegment(response, pos); 
      break; 

     case section: 
      result = readSegment(response, pos); 
      break; 

     case rollno: 
      result = readSegment(response, pos); 
      break; 

     case subject: 
      result = readSegment(response, pos); 
      break; 

     default: 
      break; 
     } 
     data = result[0]; 
     pos = result[1]; 
     type++; 
     updateFormElement((type - 1), data); 
    } 
} 

function updateFormElement(type, data) { 
    var element; 
    switch (type) { 
    case 0: 
     element = document.getElementById("studentName"); 
     element.value = data[0]; 
     element.disabled = true; 
     break; 

    case 1: 
     document.detail.Class.options[0] = new Option(data[0], data[0], 0, 
       0); 
     document.detail.Class.disabled = true; 

     break; 

    case 2: 
     document.detail.Section.options[0] = new Option(data[0], data[0], 
       0, 0); 
     document.detail.Section.disabled = true; 
     break; 

    case 3: 
     element = document.getElementById("RollNo"); 
     element.value = data[0]; 
     element.disabled = true; 

     break; 

    case 4: 
     break; 

    default: 
     break; 
    } 

} 

function readSegment(res, pos) { 
    var value = []; 
    var result = []; 
    var valueindex = 0; 
    for (var index = pos + 1; index < res.length; index++) { 
     pos = index; 
     if (res[index] == '|') { 
      break; 
     } else if (res[index] == ',') { 
      valueindex++; 
     } else { 
      if (value[valueindex] == null 
        || value[valueindex] == 'undefined') { 
       value[valueindex] = ""; 
      } 
      value[valueindex] = value[valueindex] + res[index]; 
     } 
    } 
    result.push(value); 
    result.push(pos); 
    return result; 
} 


<form name="detail" method="post"> 
    <p align="center">Either Enter :</p> 
    <span id="01120"><b>Registration id:</b></span> <input type="text" 
     name="regid"> <span id="01119"></span> <input type="submit" 
     value="getDetails" onclick="funcOnChange(this)" 
     name="regIdsubmitbutton"> <br> 

funcOnchange()가 호출되어 드롭 다운의이 onChange 및 getDetail 버튼의 onClick에 : 여기

는 JSP 파일에서 코드의 조각이다. 응답 문자는 parseResponse()의 이고, 텍스트는 다양한 텍스트 상자에 설정됩니다. parseResponse() 디버깅이 올바르게 완료되었지만 해당 페이지가 새로 고쳐진 후.

Answer 1

제출 단추는 페이지를 내부적으로 새로 고칩니다. 따라서 단추의 유형을 변경해야합니다. 그러면 문제가 해결 될 것입니다.

<input type="button" 
     value="getDetails" onclick="funcOnChange(this)" 
     name="regIdsubmitbutton">