【发布时间】：2014-03-18 13:40:39
【问题描述】：
我在数据库中有以下数据。我想通过使用 servlet 和 ajax 填充这些数据来填充我的文本字段。
data_id ------------------------------------ char(30)
纬度 -------------- 双精度
Long ------------- 双精度
Info.class
package org.bean
public class Info {
private String data_id;
private String lat;
private String long;
public void setData_id(String data_id) {
this.data_id = data_id;
}
public String getData_id() {
return data_id;
}
public void setLat(String lat) {
this.lat = lat;
}
public String getLat() {
return lat;
}
public void setLong(String long) {
this.long = long;
}
public String getLong() {
return long;
}
}
FetchData.class
public class FetchData {
private static Connection connection = null;
public static Connection getConnection() {
if (connection != null)
return connection;
else {
try {
Properties prop = new Properties();
InputStream inputStream =
FetchData.class.getClassLoader().getResourceAsStream("/db.properties");
prop.load(inputStream);
String driver = prop.getProperty("driver");
String url = prop.getProperty("url");
String user = prop.getProperty("user");
String password = prop.getProperty("password");
Class.forName(driver);
connection = DriverManager.getConnection(url, user, password);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return connection;
}
}
public static ArrayList<Info> getAllInfo() {
connection = FetchData.getConnection();
ArrayList<Info> inf = new ArrayList<Info>();
try {
Statement statement = connection.createStatement();
ResultSet rs = statement.executeQuery("select * from info_table");
while(rs.next()) {
Info in=new Info();
in.setData_id(rs.getString("data_id"));
in.setLat(rs.getString("Lat"));
in.setLong(rs.getString("Long"));
inf.add(in);
}
} catch (SQLException e) {
e.printStackTrace();
}
return inf;
}
}
PopulateTable.class
public class PopulateTable extends HttpServlet {
private static final long serialVersionUID = 1L;
public PopulateTable() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Info> in=new ArrayList<Info>();
in=FetchData.getAllInfo();
Gson gson = new Gson();
JsonElement element = gson.toJsonTree(in, new TypeToken<List<Info>>() {}.getType());
JsonArray jsonArray = element.getAsJsonArray();
response.setContentType("application/json");
response.getWriter().print(jsonArray);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
index.jsp
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.get('PopulateTable',function(responseJson) {
if(responseJson!=null){
$("#infotable").find("tr:gt(0)").remove();
var table1 = $("#infotable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['data_id']);
rowNew.children().eq(1).text(value['lat']);
rowNew.children().eq(2).text(value['long']);
rowNew.appendTo(table1);
});
}
});
$("#tablediv").show();
});
});
</script>
</head>
<input type="button" value="Show Table" id="showTable"/>
<br/>
<br/>
<div id="tablediv">
<table cellspacing="0" id="infotable">
<tr>
<th scope="col">Data_id</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
</tr>
</table>
</div>
</body>
</html>
我基本上是在 jsp 页面上使用 servlet 和 ajax 将数据库数据填充到表中，而无需刷新页面。我希望采取同样的行动。我希望用户输入要从数据库中填充的该文本字段纬度和经度值的 data_id 和 onkeyup 事件，而不是单击按钮。我该怎么做呢。
如果我把jsp页面改成
<input type="text" id="data_id" onblur=""/>
<input type="text" id="latitude"/>
<input type="text" id="longitude"/>
然后 onblur 事件应该使用与键入的 id 对应的数据填充具有 id 纬度和经度的文本字段。我该怎么做呢？
【问题讨论】：
标签： javascript jquery ajax jsp servlets