一个带有 JSP 的简单 AJAX 示例
Posted
技术标签:
【中文标题】一个带有 JSP 的简单 AJAX 示例【英文标题】：A Simple AJAX with JSP example 【发布时间】：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" >
<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：语法更简单，跨浏览器可移植性。
【参考方案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，否则会导致回发。
【讨论】：
以上是关于一个带有 JSP 的简单 AJAX 示例的主要内容，如果未能解决你的问题，请参考以下文章