Question

我的load_person.jsp代码为

<h3>Person's Info</h3>
Person: <select onchange="loadIntoDiv(this.value)">
<option value="1">Select Name 1</option>
<option value="2">Select Name 2</option>
<option value="3">Select Name 3</option>
</select>
<BR><BR>
<div id="fetchHere"></div>
<input type="submit" name="submit" value="Submit Proposal" />

现在我想要的是在选择任何选项时加载一个新的jsp页面，即fetch.jsp。我只想要JavaScript代码，没有请注意。

选项的更改，必须调用此loadIntoDiv(this.value)，该函数应调用fetch.jsp。请注意，在选择任何选项之前，不得加载fetch.jsp。并且应该在每个OnChange中调用或加载，因此不需要隐藏或显示所需的div概念。

对于上述情况，我需要loadIntoDiv()的JavaScript代码。

Answer 1

JavaScript在客户端运行。 JSP在服务器端运行。客户端和服务器是两个不同的环境我建议您使用Ajax调用来执行此操作，这是一种有效的Web应用程序方式，可以减少页面刷新或整页重新加载的需要

例如：您将选择标记更改为

<select name="selection" id="dropdown">
<option value="1">Select Name 1</option>
<option value="2">Select Name 2</option>
<option value="3">Select Name 3</option>
</select>

并且如果fetch.jsp的内容是

<%
   String val = request.getParameter("selection");
   out.println(val);
 %>

然后您可以将此脚本添加到load_person.jsp以通过ajax调用获取值：

$(document).ready(function() {
   $('#dropdown').on('change', function() {
        selection = $("#dropdown").val();

        $.ajax({
            type : "POST",
            url : "fetch.jsp",
            data : "selection=" + selection  ,
            success : function(data) {
                $("#fetchHere").html(data);
            }
        });
    });     
});

Answer 2

这应该做Taha的功能，但是在纯javascript中，没有JQuery：

  window.onload = function() {
     document.getElementById('dropdown').onChange = function() {
       selection = document.getElementById("dropdown").value;
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == XMLHttpRequest.DONE) {
           if (xmlhttp.status == 200) {
             document.getElementById("fetchHere").innerHTML = xmlhttp.responseText;
           }
         }
       };
       xmlhttp.open("POST", "fetch.jsp", true);
       xmlhttp.send("selection=" + selection);
     }}

Answer 3

我很久以前就找到了解决方案，但忘了更新，所以这里就是..

我们需要进行一次AJAX调用，并且该AJAX的响应将是fetch.jsp（如果需要的话，页面包含一些处理和数据），并用此响应替换之前的div内容。

function loadIntoDiv(var abc) {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("fetchHere").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/ServletController?param=abc", true);
  //Here param is used to pass the value of selected element
  //We can also use here POST/PUT/DELETE methods..with some modification.
  xhttp.send();
}

当（onchange）选择任何<option>

3 个答案: