现在我有个网页Google map如果你在地图上用点压左键可以直接秀出这些信息
而我在右边有个TEXT格式的字段,要怎么做到如果我点取左边的MAP,将MAP信息直接秀在TEST字段,如果在压一次会将刚刚的TEXT信息盖掉
要怎么做到实时更新如果能的话能大概写个范例吗?
而我在右边有个TEXT格式的字段,要怎么做到如果我点取左边的MAP,将MAP信息直接秀在TEST字段,如果在压一次会将刚刚的TEXT信息盖掉
要怎么做到实时更新如果能的话能大概写个范例吗?
下面是个ajax的例子，用来更新一个div element，你做你需要的修改就可以了前台index.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Demo page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function callServlet()
{
var url = "./ajaxTestServlet";
var sname = 'userName='+$F('queryName');
new Ajax.Request(url,{
method:'get',
parameters:sname,
onComplete:doAjaxResponse
});
}
function doAjaxResponse(originalRequest)
{
$('ajaxTest').innerHTML=originalRequest.responseText;
}
function callAjaxUpdate()
{
var url = "./ajaxTestServlet";
var sname = 'userName='+$F('queryName');
new Ajax.Updater('ajaxTest',url,{
method:'get',
parameters:sname
});
}
function callAjaxUpdate2()
{
var url = "./ajaxTestServlet";
var sname = 'userName='+$F('queryName');
new Ajax.Updater({success:'ajaxTest'},url,{
method:'get',
parameters:sname,
onFailure:showError
});
}
function showError()
{
alert('error');
}
</script>
</head> <body>
<div id="ajaxTest" style="text-align: center;">
<table border="1px">
<tr>
<td>
This is a Demo Page of Prototype Library's Ajax
</td>
</tr>
</table>
</div>
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
name:
<input type="text" id="queryName">
<br>
<input type="button" value="query" onclick="callAjaxUpdate2();">
</div>
</body>
</html>
后台 TestAjaxServlet.java
import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class TestAjaxServlet extends HttpServlet { /**
* Constructor of the object.
*/
public TestAjaxServlet() {
super();
} /**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
} /**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request, response);
} /**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/xml");
PrintWriter out = response.getWriter(); String userName = request.getParameter("userName");
UserInfo user = null;
if(userName.equals("tavor"))
{
user = new UserInfo(userName, 24, "male");
}
else
{
if(userName.equals("ajax"))
{
user = new UserInfo(userName, 10, "unknown");
}
}
out.print("<table border='1px' align='center'>");
out.print("<tr><td width='200'>");
if(user == null)
{
out.print("Unknow User:"+userName);
}
else
out.print(user.getUserName());
out.print("</td>");
if(user != null)
{
out.print("<td width='200'>");
out.print(user.getAge());
out.print("</td>");
out.print("<td width='200'>");
out.print(user.getSex());
out.print("</td>");
}
out.println("</tr></table>");
//out.print("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
// out.print("<user>");
// out.print("<name>");
// if(user == null)
// {
// out.print("Unknow User:"+userName);
// }
// else
// out.print(user.getUserName());
// out.print("</name>");
// if(user != null)
// {
// out.print("<age>");
// out.print(user.getAge());
// out.print("</age>");
// out.print("<sex>");
// out.print(user.getSex());
// out.print("</sex>");
// }
// out.println("</user>");
out.flush();
out.close();
} /**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}}
后台bean类UserInfo.javapublic class UserInfo
{
private String userName = null;
private int age = 0;
private String sex = null;
public UserInfo(String userName, int age, String sex) {
super();
this.userName = userName;
this.age = age;
this.sex = sex;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}
下载地址prototype官方网站