Javascript 使用jsp和sql查询解决问题

我想重新加载页面的特定部分，而不必重新加载整个页面。 当我单击某个特定按钮时，应该会重新加载。 单击该按钮，应从数据库中提取值，并在我的页面上进行相关更改。 我没有ajax方面的经验，也有一些servelt方面的经验

<%
                    Integer x = (Integer) session.getAttribute("x_pass");
                    Statement stmt;
                    ResultSet rs;
                    stmt = con_pie.createStatement();
                    String project_name_1 = "", project_name_2 = "";
                    int used = 0, unused = 0, total = 0, p_cat, table_count = 0;
                    int progress_percentage = 0;

                    String sql = "SELECT  * FROM project_head_n";
                    rs = stmt.executeQuery(sql);
                    while (rs.next()) {
                        int var_progress = 0;
                        //Retrieve by column name
                        p_cat = rs.getInt("p_cat");
                        project_name_1 = rs.getString("project_no");
                        project_name_2 = rs.getString("project_name");
                        table_count++;
                        //used=Integer.parseInt(rs.getString(16));
                        total = rs.getInt("t_cost");
                        used = rs.getInt("u_cost");
                        unused = total - used;
                        //boolean b=rs.getDate("ifa");
                        if (p_cat == x) {
                            for (int i = 4; i < 16; i++) {
                                if (rs.getDate(i) != null) {
                                    var_progress++;
                                }
                            }

这是我与数据库连接的代码，我使用了一个不同的文件，其中包含所有连接，并包含在顶部

现在，我希望通过以下方式上传这些值

<div class="row">
<!-- row starts here  -->
<div class="col-md-1 h6">
    <!-- col 1 row 1 contains project name -->
    <%
        out.println(project_name_1);
    %>
    <div class="row h6">
        <!-- row 2 of col 1 contains project name  -->
        <%
            out.println(project_name_2);
        %>
    </div>
</div>
<div class="col-md-1 col-md-push-0">
    <!--  col 2 row 1 contains the progress bar for cost-->
    <%
        //used=used+5; unused=unused+5;
                progress_percentage = (used * 100) / total;
    %>
    <div class="progress progress-striped active" id="pb">
        <div class="progress-bar" role="progressbar" aria-valuenow="45"
            aria-valuemin="0" aria-valuemax="100"
            style="width: <%out.println(progress_percentage);%>">
            <%
                out.println(progress_percentage + "%");
            %>
            Complete
        </div>
    </div>

    <div class="row">
        <!-- row 2 of col 2 conatins cost used/unsed ratio in words -->
        <%
            out.println(used + "/" + total);
        %>
    </div>
</div>
<div class="col-md-3 col-md-push-1" style="width: 80%">
    <!-- contains the main progress bar for the project completion -->
    <div class="progress progress-striped active">
        <%
            out.println((var_progress * 100) / 12);
        %>
        complete
        <div class="progress-bar" role="progressbar" aria-valuenow="45"
            aria-valuemin="0" aria-valuemax="100"
            style="width: <%out.println((var_progress * 1000) / 12);%>">
            <%
                out.println((var_progress * 100) / 12);
            %>
            Complete
        </div>
    </div>
</div>


完成
完成
完成



我已经使用了引导的样式。
现在的问题是，如果我点击任何一个按钮，进度条的值应该改变，如果我在这里输入x的值

if (p_cat == x) {
        for (int i = 4; i < 16; i++) {
        if (rs.getDate(i) != null) {
        var_progress++;
            }
    }

if（p_cat==x）{
对于（int i=4；i<16；i++）{
如果（rs.getDate（i）！=null）{
var_progress++；
}
}

然后刷新页面，我会得到新的值。我想在单击按钮时更改这些值。
我的项目被困在这个问题上，请提供帮助。
例如，您在该页面上有一个带有此示例标记的默认数据，单击该数据，您将需要更多数据。因此，jsut在js中调用一个方法，例如
moredata（）

var pageIndex=1；
函数moredata（路径）{

在getdata.jsp页面上，jsut获取pageindex的值和从这里传递的其他字段，并将其传递给DB或其他任何地方的数据
例如getdata（页面索引）；//每次您的pageindex将增加，并且您将在该div中加载更多数据
使用js调用调用数据的特定方法，并在响应中设置该值。但是如何实时获取要更改的值？您想在按钮上加载更多数据吗？是的，我想加载更多数据，以替换那里的数据before@A5l-LE5T他的建议在某种程度上解决了我的问题
<div class="x">
 xyz 
</div>
<div id="inner"></div>
<a href="javascript:void(0);">
 <div class="loadmore" id="showload" onclick="moredata();  showLoadMore('<%=path%>')" > load more</div>
  </a>

function showLoadMore(path) {
    alert("hiii");
        var imgUrl = path+"images/loadMore.gif";
        document.getElementById("showload").innerHTML='<img src='+imgUrl+' border="0" style="margin-top:10px;"/>';
}

function hideLoadMore() {
    document.getElementById("showload").innerHTML='load more';
}

     var pageCount = 2;
     var page="pagename.jsp";
     var userPage = "page.jsp";
     var userPersonalPage = "page1.jsp";
    pageIndex++;
var url = path+"**page name where you are getting data ex (getdata.jsp)**";
var params ="index="+pageIndex+"&onPage="+page;
alert(params);
var http = new XMLHttpRequest();
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() 
{//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        var old =   document.getElementById("inner").innerHTML;
        document.getElementById("inner").innerHTML=old+http.responseText;
        hideLoadMore(); **//this will set the data in that div** 
    }
};
http.send(params);
}