一个带有 JSP 的简单 AJAX 示例答案

【问题标题】：A Simple AJAX with JSP example一个带有 JSP 的简单 AJAX 示例
【发布时间】：2012-02-13 00:14:21
【问题描述】：

我正在尝试使用 JSP 学习 AJAX，并且我编写了以下代码。这似乎不起作用。请帮助：

这是我的 configuration_page.jsp

    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>JSP Page</title>
     <script type="text/javascript">

      function loadXMLDoc()
      {
        var xmlhttp;
        var config=document.getElementById('configselect').value;
        var url="get_configuration.jsp";
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();
}
</script>        

</head>

<body>
  <h2 align="center">Saved Configurations</h2>
   Choose a configuration to run: 
  <select name="configselect" width="10">
    <option selected value="select">select</option>
    <option value="Config1">config1</option>
    <option value="Config2">config2</option>
    <option value="Config3">config3</option>
  </select> 
  <button type="button" onclick='loadXMLDoc()'> Submit </button>
  <div id="myDiv">
    <h4>Get data here</h4>
  </div>
 </body>
</html>

这是我试图从上面的 AJAX 代码访问的 get_configuration.jsp：

<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>JSP Page</title>

  </head>
  <body>

    <h4>Mee..</h4> 
  </body>
</html>

【问题讨论】：

如果get_configuration.jsp的结果作为一个div的内容，那么它不应该包含<html>，<head>，<body>。它应该只包含<h4>。帮自己一个忙，使用 jQuery。
也建议使用jQuery：语法更简单，跨浏览器可移植性。

标签： java ajax jsp asynchronous

【解决方案1】：

我使用jQuery AJAX 发出 AJAX 请求。

检查以下代码：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#call').click(function ()
            {
                $.ajax({
                    type: "post",
                    url: "testme", //this is my servlet
                    data: "input=" +$('#ip').val()+"&output="+$('#op').val(),
                    success: function(msg){      
                            $('#output').append(msg);
                    }
                });
            });

        });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    input:<input id="ip" type="text" name="" value="" /><br></br>
    output:<input id="op" type="text" name="" value="" /><br></br>
    <input type="button" value="Call Servlet" name="Call Servlet" id="call"/>
    <div id="output"></div>
</body>

【讨论】：

【解决方案2】：

您在“configuration_page.jsp”文件中犯了错误。在这个文件中，函数 loadXMLDoc() 的第 2 行应该是这样的：

var config=document.getElementsByName('configselect').value;

因为您只在<select> 标签中声明了name 属性。所以你应该通过名字来获取这个元素。

更正此问题后，它将运行而不会出现任何 JavaScript 错误

【讨论】：

【解决方案3】：

loadXMLDoc JS函数应该返回false，否则会导致回发。

【讨论】：