Question

当我按下按钮getDetails时，我需要填写网页的字段。我提供registration id作为输入，在此基础上对数据库发出请求。我收到的回复需要显示在各个字段中。

我收到了所需的回复，并正确处理了回复（使用Google Chrome选项inspect element进行了验证）。此外，我尝试使用Inspect Element调试jsp代码，我发现响应的所有值都设置正确，但是当控件传递请求引发的回调方法时，我的网页刷新并且URL更改为 http://localhost:8080/ReportFetcher/FirstJSP.jsp?regid=2&regIdsubmitbutton=getDetails&Class=0

而我希望它是http://localhost:8080/ReportFetcher/FirstJSP.jsp?

因为此页面还有动态下拉列表，在选择一个下拉列表后，会引发请求，并处理响应并填充其他下拉列表。

这种情况正常，所以我无法弄清楚为什么页面网址会在第一种情况下发生变化。另请注意，当第一种情况下将页面置于调试状态时，我可以看到网页的各个元素中设置的值，这意味着（在我的意见中）首先设置值然后刷新页面，这导致擦除先前设置数据

以下是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()在getDetail按钮的下拉列表onChange和onClick上调用。在parseResponse()响应文本中解析文本并在各种文本框上设置文本。虽然调试parseResponse()正确完成，但在该页面刷新之后。

Answer 1

提交按钮在内部刷新页面，因此您需要更改按钮的类型，希望这样可以解决问题。

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

文本框的更改不会反映在网页上

1 个答案: