Изменения в текстовое поле не отражаются на веб-странице

Question

Мне нужно заполнить поля моей веб-страницы, когда я нажимаю кнопку getDetails. Я предоставляю registration id в качестве входных данных, на основе которых создается запрос к базе данных. Ответ, который я получаю, должен отображаться в разных полях.

Я получаю желаемый ответ и обрабатываю ответ правильно (проверено с помощью опции google chrome inspect element). Кроме того, я попытался отладить код jsp с помощью элемента Inspect Element, и я обнаружил, что все значения ответа установлены правильно, но по мере того, как элемент управления передает метод обратного вызова запрошенного запроса, моя страница обновляется и URL изменяется на http://localhost:8080/ReportFetcher/FirstJSP.jsp?regid=2&regIdsubmitbutton=getDetails&Class=0

в то время как я ожидал, что это будет http://localhost:8080/ReportFetcher/FirstJSP.jsp?

, потому что на этой странице также имеет динамическое падение вниз, в котором после выбора одной капли вниз, запрос поднимается, и ответ обрабатывается и другие выпадающий заполняется.

Этот сценарий работает нормально, поэтому я не могу понять, почему URL-адрес страницы изменяется в первом случае. Также обратите внимание на то, что при отладке страницы в первом случае я мог видеть значение, установленное в различных элементах веб-страницы, что означает (по моему мнению) значения сначала устанавливаются, а затем обновляется страница, что приводит к стиранию ранее установить данные.

Вот часть кода из файла Jsp:

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 и onClick кнопки GetDetail. в тексте ответа parseResponse() разобран и текст установлен в различном текстовом поле. При отладке parseResponse() выполняется правильно, но после этой страницы обновляется.

Answer 1

Кнопка отправки внутренне обновляет страницу, поэтому вам нужно изменить тип кнопки, и, надеюсь, это решит проблему.

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