Leon2009
07-06-2017, 23:11
Ciao a tutti, ho un piccolo problema. Sto facendo una piccola web-application. Devo fare la barra di ricerca per ricercare gli utenti di un social. Perņ, quando clicco sul bottone "cerca", la richiesta ajax da come risposta "Status 200 ok", perņ non ottengo il json, sapete darmi delle soluzioni?
Ricerca del nome:
<div id="searchIscritto">
<input id="searchField" type="text" placeholder="cerca il tuo amico" value="">
<button id="searchFriend">Cerca!</button>
</div>
Contenuto da visualizzare:
<div id="usersList">
<c:forEach var="iscritto" items="${listaIscritti}">
<div class="user">
<div class="profilePic">
<img alt="Foto Profilo" src="${iscritto.urlImmProfilo}">
</div>
<div class="userData">
<h2>${iscritto.nome}</h2>
<a href="Profilo?user=${iscritto.id}">Link al profilo</a>
<br>
</div>
</div>
</c:forEach>
</div>
javascript:
function createElement(iscr){
var img = $("<img>")
.attr("alt","Foto Profilo")
.attr("src",iscr.urlImmProfilo);
var nome = $("<h2>").html(iscr.nome);
var link = $("<a>")
.attr("href", "Profilo?user="+iscr.id)
.html("Link al Profilo");
var userData = $("<div>")
.attr("class","userData")
.append(nome)
.append(link);
var profilePic = $("<div>")
.attr("class","profilePic")
.append(img);
return $("<div>")
.attr("class","user")
.append(profilePic)
.append(userData);
}
function stateSuccess(data){
var userListPage = $("#usersList");
$(userListPage).empty();
for(var instance in data){
$(userListPage).append(createElement(data[instance]));
}
}
function stateFailure(data, state){
console.log(state);
}
$(document).ready(function(){
$("#searchFriend").click(function(){
var nomeAmico = $("#searchField")[0].value;
$.ajax({
url: "Filter",
data:{
cmd:"search",
nomeAmico: nomeAmico
},
dataType: "json",
success: function (data, state){
stateSuccess(data);
},
error: function (data, state){
stateFailure(data, state);
}
});
});
});
Servlet:
String command = request.getParameter("cmd");
if(command!=null){
if (command.equals("search")){
ArrayList<Iscritto> listaIscritti = IscrittoFactory.getInstance().getIscrittiList(request.getParameter("nomeAmico"));
request.setAttribute("listaIscritti", listaIscritti);
response.setContentType("application/json");
response.setHeader("Expires", "Sat, 6 May 1995 12:00:00 GMT");
response.setHeader("Cache-Control", "no-store, no-cache, "
+ "must-revalidate");
request.getRequestDispatcher("listaIscrittiJson.jsp").forward(request, response);
}
}
listaIscrittiJson.jsp:
<%@page contentType="application/json" pageEncoding="UTF-8"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<json:array>
<c:forEach var="iscritto" items="${listaIscritti}">
<json:object>
<json:property name="nome" value="${iscritto.nome}"/>
<json:property name="cognome" value="${iscritto.cognome}"/>
<json:property name="urlImmProfilo" value="${iscritto.urlImmProfilo}"/>
<json:property name="frase" value="${iscritto.frase}"/>
<json:property name="nascita" value="${iscritto.nascita}"/>
<json:property name="username" value="${iscritto.username}"/>
<json:property name="password" value="${iscritto.psw}"/>
</json:object>
</c:forEach>
</json:array>
Grazie in anticipo!
Ricerca del nome:
<div id="searchIscritto">
<input id="searchField" type="text" placeholder="cerca il tuo amico" value="">
<button id="searchFriend">Cerca!</button>
</div>
Contenuto da visualizzare:
<div id="usersList">
<c:forEach var="iscritto" items="${listaIscritti}">
<div class="user">
<div class="profilePic">
<img alt="Foto Profilo" src="${iscritto.urlImmProfilo}">
</div>
<div class="userData">
<h2>${iscritto.nome}</h2>
<a href="Profilo?user=${iscritto.id}">Link al profilo</a>
<br>
</div>
</div>
</c:forEach>
</div>
javascript:
function createElement(iscr){
var img = $("<img>")
.attr("alt","Foto Profilo")
.attr("src",iscr.urlImmProfilo);
var nome = $("<h2>").html(iscr.nome);
var link = $("<a>")
.attr("href", "Profilo?user="+iscr.id)
.html("Link al Profilo");
var userData = $("<div>")
.attr("class","userData")
.append(nome)
.append(link);
var profilePic = $("<div>")
.attr("class","profilePic")
.append(img);
return $("<div>")
.attr("class","user")
.append(profilePic)
.append(userData);
}
function stateSuccess(data){
var userListPage = $("#usersList");
$(userListPage).empty();
for(var instance in data){
$(userListPage).append(createElement(data[instance]));
}
}
function stateFailure(data, state){
console.log(state);
}
$(document).ready(function(){
$("#searchFriend").click(function(){
var nomeAmico = $("#searchField")[0].value;
$.ajax({
url: "Filter",
data:{
cmd:"search",
nomeAmico: nomeAmico
},
dataType: "json",
success: function (data, state){
stateSuccess(data);
},
error: function (data, state){
stateFailure(data, state);
}
});
});
});
Servlet:
String command = request.getParameter("cmd");
if(command!=null){
if (command.equals("search")){
ArrayList<Iscritto> listaIscritti = IscrittoFactory.getInstance().getIscrittiList(request.getParameter("nomeAmico"));
request.setAttribute("listaIscritti", listaIscritti);
response.setContentType("application/json");
response.setHeader("Expires", "Sat, 6 May 1995 12:00:00 GMT");
response.setHeader("Cache-Control", "no-store, no-cache, "
+ "must-revalidate");
request.getRequestDispatcher("listaIscrittiJson.jsp").forward(request, response);
}
}
listaIscrittiJson.jsp:
<%@page contentType="application/json" pageEncoding="UTF-8"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<json:array>
<c:forEach var="iscritto" items="${listaIscritti}">
<json:object>
<json:property name="nome" value="${iscritto.nome}"/>
<json:property name="cognome" value="${iscritto.cognome}"/>
<json:property name="urlImmProfilo" value="${iscritto.urlImmProfilo}"/>
<json:property name="frase" value="${iscritto.frase}"/>
<json:property name="nascita" value="${iscritto.nascita}"/>
<json:property name="username" value="${iscritto.username}"/>
<json:property name="password" value="${iscritto.psw}"/>
</json:object>
</c:forEach>
</json:array>
Grazie in anticipo!