Question

我有一个jsp页面，用户可以根据他们的要求搜索其个人资料，这是我的jsp页面的UI Search Page

选择所有必需的详细信息并单击“搜索”按钮后，我便通过ajax请求将请求发送到servlet。

这是我的ajax请求：

function searchProfile(){
var url="searchProfile";
var gender = $("#genderDropDownList").val();
var fromAge = $("#fromAgeDropDownList").val();
var toAge = $("#toAgeDropDownList").val();
var manglikStatus = $("#ManglikDownList").val();
var annualIncome = $("#AnnualIncomeList").val();

if(gender==""){     
    $("#invalidData").html("<font color='#bd2130' style='font-family:arial;font-size:80%;'>Please select Gender</font>");
    $("invalidData").removeClass("d-none");
    return false;
}else{
    $("#invalidData").html("");
}
if(fromAge>toAge){
    $("#invalidData").html("<font color='#bd2130' style='font-family:arial;font-size:80%;'>From Age should not be greater than To Age</font>");
    $("invalidData").removeClass("d-none");
    return false;
}else{
    $("#invalidData").html("");
    $.ajax({
        url:url,
        type:'POST',
        dataType:'json',
        data:{
            gender:gender,
            fromAge:fromAge,
            toAge:toAge,
            manglikStatus:manglikStatus,
            annualIncome:annualIncome
        },
        success: function(result){
            $('#ignorecrossbefore_1').show();
             $(".input-data").each(function(i, result){                      
                    $('#searchProfileName').html(result[i].userBirthName);
                    $('#cityName').html(result[i].presetnAddressCity);
                    $('#age').html(result[i].userAge);
                    $('#heigth').html(result[i].userheight);
                    $('#caste').html(result[i].userCasteName);
                    $('#eudcation').html(result[i].highestEducation);
                    $('#occupation').html(result[i].employedIn);
                });

        },
        error: function(jqxhr) {
            $('#invalidData').html("<font color='#bd2130' style='font-family:arial;font-size:80%;'>Something went wrong</font>");
            $("invalidData").removeClass("d-none"); 
            return false;
        }
    });


}

}

当此ajax请求发送到servlet时，它返回jsonArray作为响应。

这是我的Servlet代码。

package com.IDM.Controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.IDM.DaoController.DBConnection;

/**
 * Servlet implementation class SearchProfileController
 */
@WebServlet("/SearchProfileController")
public class SearchProfileController extends HttpServlet {
private static final long serialVersionUID = 1L;
   String sqlQuery;
  ArrayList<Object> list;
  JSONObject jsonObj;
  JSONArray jsonArr;
public SearchProfileController() {
    super();
    // TODO Auto-generated constructor stub
}


protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
}


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    String genderName = request.getParameter("gender");
    String fromAge = request.getParameter("fromAge");
    String toAge = request.getParameter("toAge");
    String ManglikStatus = request.getParameter("manglikStatus");
    String AnnualIncomeList = request.getParameter("annualIncome");
    System.out.println(genderName);
    System.out.println(fromAge);
    System.out.println(toAge);
    System.out.println(ManglikStatus);
    System.out.println(AnnualIncomeList);

    /*sqlQuery ="Select * from UserDetails where Gender='"+genderName+"'"+ "and Age between "+"'"+fromAge+"'" 
                +"and" +"'"+toAge+"'" +"and MaglikStatus='"+ManglikStatus+"'"+"AND PartnerSalary ='"+AnnualIncomeList+"'";*/
    sqlQuery ="Select * from UserDetails where Gender='"+genderName+"'";
    Connection con = DBConnection.connectDB();
            JSONArray details = null;
            try {
                details = getDBResultList(sqlQuery, con);
            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            response.getWriter().write(details.toString());

}

public JSONArray getDBResultList(String query, Connection con) throws JSONException {
    jsonObj = new JSONObject();
    jsonArr=new JSONArray();
    ArrayList<UserDetails> userDetailsList = new ArrayList<>();
    try {
        ResultSet result  = DBConnection.getDBResultSet(con, sqlQuery);
        if(result.next()) {
                while(result.next()) {  
                    String userBirthName = result.getString("BirthName");
                    String presetnAddressCity = result.getString("PresentAddressCity");
                    String userAge = result.getString("Age");
                    String userheight = result.getString("Height");
                    String userCasteName = result.getString("Caste");
                    String highestEducation = result.getString("HighestEducation");
                    String employedIn = result.getString("EmployedIn");
                    String userPhoto = result.getString("uploadedImage");

                    JSONObject jObj = new JSONObject(); 
                    jObj.put("userBirthName", userBirthName);
                    jObj.put("presetnAddressCity", presetnAddressCity);
                    jObj.put("userAge", userAge);
                    jObj.put("userheight", userheight);
                    jObj.put("userCasteName", userCasteName);
                    jObj.put("highestEducation", highestEducation);
                    jObj.put("employedIn", employedIn);
                    jObj.put("userPhoto", userPhoto);

                    jsonArr.put(jObj);
                }
            //  jsonArr = new JSONArray(userDetailsList);







        }else {
            System.out.println("No Result found");
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBConnection.closeDBConnection(con);
    }
    return jsonArr;
}

}

这是我的JSP代码，需要在其中显示搜索结果。

<div id="ignorecrossbefore_1" style="display:none">
            <div class="posrelative">
                <img width="150" height="150" border="0" src="https://content.screencast.com/users/Ravi9873/folders/Jing/media/86eb3246-c11b-48fc-bc00-0fce0ebe4c55/2019-06-19_0914.png">
            </div>
            <div class="fleft mediumtxt" style="width: 900px; margin-left: 177px; margin-top: -142px;">
                <div class="location-icon clr5 padb10" alt="Location" title="Location">
                    <h4><span class="input-data" id="searchProfileName"></span></h4>
                </div>
                    <ul>
                    <li><span class="input-field">City </span> <span
                            class="input-data" id="cityName"></span></li>
                        <li><span class="input-field">Age </span> <span
                            class="input-data" id="age"></span></li>
                        <li><span class="input-field">Height </span> <span
                            class="input-data" id="heigth"></span></li>
                        <li><span class="input-field">Caste</span><span
                            class="input-data" id="caste"></span></li>
                        <li><span class="input-field">Education</span><span
                            class="input-data" id="eudcation"></span></li>
                        <li><span class="input-field">Occupation</span><span
                            class="input-data" id="occupation"></span></li>
                    </ul>
                    <a class="btn btn-primary btn-sm search-btn-padding"
                            style="color: white;" onclick="searchProfile()">View Profile</a>

                </div>
            </div>

我想在图像下方显示结果

Search Result Page

我在jsonArray的ajax中得到响应，但不知道如何在jsp页面上对其进行迭代以在JSP页面上显示所有结果数据。

您可以看到下图，我在ajax请求中得到6个结果，但是不知道如何根据响应在jsp页面上显示6个结果。 Result console log

在此先感谢您的帮助。

如何使用jquery和servlet分页显示JSP页面上数据库的所有搜索结果

0 个答案: