个人中心
gpt4 book ai didi

javascript - 使用 servlet 和 ajax 从数据库填充文本框中的值

转载 作者：行者123 更新时间：2023-11-28 10:56:16 26 4
gpt4 key购买 nike

我的数据库中有以下数据。我想通过使用 servlet 和 ajax 填充这些数据来填充我的文本字段。

data_id ------------------------ char(30)
纬度-------------------------- double
长整型------------------------- double

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 纬度和经度的文本字段。我该怎么做呢？

最佳答案

不要将 Ajax 调用放入 $(document).ready(function() {...}); 中，而是将其放入具有名称的函数中，并让 onblur 调用它:

function populatefields()
{
  ... //Ajax stuff
}
...
...
<input type="text" id="data_id" onblur="populatefields()" />

关于javascript - 使用 servlet 和 ajax 从数据库填充文本框中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21995444/

26 4 0
文章推荐： javascript - 密码检查问题
文章推荐： javascript - 如何在 HTML 表单中将文件对象设置到输入文件中？
文章推荐： javascript - 在 HTML 表单上设置 Enter 键提交
文章推荐： javascript - 如何在适用于 Android 和 cordova 的项目中单击通知时显示特定页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com