簡體   English   中英

如何調用Ajax請求以從數據庫中獲取記錄並在頁面加載時使用servlet在jsp上顯示

[英]How to Call Ajax request to fetch records from database and display on jsp using servlet on page load

我在數據庫中有不同的字段,我需要顯示jsp中的所有記錄,但是當我向servlet發出ajax請求時,它將所有結果綁定到所有字段。 我希望firstname應該與firstname綁定,lastname應該與lastname綁定。 當前它與帶有firstanamelastname的frstname綁定。

我盡了最大的努力來解決我的問題,但我認為問題出在我提出的ajax請求中。

   <html>
   <head></head>
   <body>  
    <div class="form-row">
   <div class="col-md-9">
   <div class="form-row pad-left">
   <div class="col-md-6 mb-1">
   <label for="validationCustomUsername"><b>Birth Name:</b> 
   <span id='birthName'></span>                                                     
   </div>
   <div class="col-md-6 mb-3">
  <label for="validationCustomUsername"><b>Initiated Name:</b> 
  <span id='initiatedName'></span> 
  </div>
  </div>

<!-- SECOND ROW STARTS HERE -->
    <div class="form-row pad-left">
      <div class="col-md-6 mb-1">
    <label for="validationCustomUsername"><b>Place Of Birth: </b> 
   <span id='placeOfBirth'></span> 
   </div>
   </div>
    <div class="form-row pad-left">
     <div class="col-md-6 mb-1">
   <label for="validationCustomUsername"><b>Caste:</b>  
  <span id='caste'></span>
    </div>

     </body>

     </html>

          Servlet Code

       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");

    int userID = UserDetails.getInstance().getLastRegisteredID();
    Connection con = DBConnection.connectDB();
    String query = "Select * from PERSONS inner join 
          PersonsDetails on persons.PersonID=PersonsDetails.PersonId "
            + "where PERSONS.PersonID="+userID;
    try {
        ResultSet rs = DBConnection.getDBResultSet(con, query);
        UserDetails user = new UserDetails();
        while(rs.next()) {
            String birthName =rs.getString("BirthName");
            String initiatedName =rs.getString("InitiatedName");
            String placeOfBirth =rs.getString("PlaceOfBirth");
            String caste =rs.getString("Caste");



            response.getWriter().write(birthName);
            response.getWriter().write(initiatedName);
            response.getWriter().write(placeOfBirth);
            response.getWriter().write(caste);

        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBConnection.closeDBConnection(con);
    }


}

         Ajax Call
     function userHomeDetails(){
var username = $('#username');
var url = "http://localhost:8080/IskconDevotteeMarriage/page/UserHome"
    $(document).ready(function(){
    var url=url
        $.post("../UserHomeController", function(responseText) {
            /*document.getElementById('birthName').innerHTML ="birthName"*/
                $('#birthName').html(responseText);
                $('#initiatedName').html(responseText);
                $('#placeOfBirth').html(responseText);
                $('#caste').html(responseText);
                alert(responseText);
        });
        });

}

您可以使用JSONObject ,首先添加json jar文件,然后在servlet類中創建JSONObject對象,如下所示:

JSONObject ob= new JSONObject(); 

然后將您的parameter如下所示:

try {
        ob.put("birthName",birthName);
        ob.put("initiatedName",initiatedName);
       ob.put("placeOfBirth",placeOfBirth);
         ob.put("caste",caste);
    } catch (JSONException e) {
        e.printStackTrace();
    }

現在,將上述參數傳遞給您的ajax調用,如下所示:

 response.getWriter().write(obj);

在您的ajax調用中,設置dataType: "json"並在您的function(responseText)您可以像下面這樣獲得此參數:

document.getElementById('birthName').value = responseText.birthName;//setting values to span with id birthName
document.getElementById('initiatedName').value = responseText.initiatedName;
document.getElementById('placeOfBirth').value = responseText.placeOfBirth;
document.getElementById('caste').value = responseText.caste;

希望這可以幫助 !

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM