Question

我想重新加载页面的特定部分，而不重新加载整个页面。当我单击特定按钮时，应该重新加载。单击该按钮时，应该获取数据库中的值，并在我的页面上进行相对更改。我没有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++;
                                }
                            }

％GT;

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

现在我希望以下列方式上传值

<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>

我使用bootstrap进行样式设计。手头的问题是，如果我点击任何一个按钮，进度条的值应该改变，如果我改变x的值，这里

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

然后刷新页面我得到新值。我希望在单击按钮时更改这些值。我的项目停留在这个问题PLZ帮助。

Answer 1

例如，您在该页面上有一个带有此示例标记的defult数据，并且点击了您想要更多数据的内容。所以jsut在js中调用一个方法moredata()

<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>

//显示loadmore

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 pageIndex = 1; 函数moredata（path）{

     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);
}

在getdata.jsp页面上jsut获取pageindex的值以及你从这里传递的其他字段并传递它以从DB或其他任何地方获取数据例如.getdata（pageindex）; //每当您的pageindex增加时，您将在该div中输出更多数据

使用jsp和sql查询的问题

1 个答案: