Wypełnianie jednego menu wyboru na podstawie innego menu wyboru za pomocą AJAX w Struts2
Próbuję użyć AJAX po raz pierwszy w Struts2. Dlatego nie mam o tym dokładnego pojęcia.
Istnieją dwa<s:select>
s, jeden przechowuje listę krajów, które są ładowane podczas ładowania strony, a drugi zawiera listę stanów, które odpowiadają krajowi wybranemu z menu kraju.
Dlatego menu stanu powinno zostać zainicjowane naonchange
Zdarzenie JavaScript wywoływane przez menu kraju.
Niepełna wersja takiej funkcji JavaScript jest następująca.
var timeout;
var request;
function getStates(countryId)
{
if(!request)
{
if(countryId===""||countryId===null||countryId===undefined||isNaN(countryId))
{
$('#stateList').html("Write an empty <select>");
alert("Please select an appropriate option.");
return;
}
request = $.ajax({
datatype:"json",
type: "GET",
contentType: "application/json",
url: "PopulateStateList.action?countryId="+countryId,
success: function(response)
{
if(typeof response==='object'&&response instanceof Array) //Array or something else.
{
$('#stateList').html(writeResponseSomeWay);
$('#temp').remove();
}
},
complete: function()
{
timeout = request = null;
},
error: function(request, status, error)
{
if(status!=="timeout"&&status!=="abort")
{
alert(status+" : "+error);
}
}
});
timeout = setTimeout(function() {
if(request)
{
request.abort();
alert("The request has been timed out.");
}
}, 300000); //5 minutes
}
}
<s:select>
dla kraju:
<s:select id="country"
onchange="getStates(this.value);"
name="entity.state.countryId"
list="countries" value="entity.state.country.countryId"
listKey="countryId" listValue="countryName"
headerKey="" headerValue="Select"
listTitle="countryName"/>
<s:select>
dla stanu:
<s:select id="state"
name="entity.stateId"
list="stateTables" value="entity.state.stateId"
listKey="stateId" listValue="stateName"
headerKey="" headerValue="Select"
listTitle="stateName"/>
Powyższa funkcja JavaScript / jQuery wysyła żądanie AJAX doPopulateStateList.action
który jest odwzorowany na metodę w klasie akcji w następujący sposób.
List<StateTable>stateTables=new ArrayList<StateTable>(); //Getter only.
@Action(value = "PopulateStateList",
results = {
@Result(name=ActionSupport.SUCCESS, location="City.jsp"),
@Result(name = ActionSupport.INPUT, location = "City.jsp")},
interceptorRefs={@InterceptorRef(value="modelParamsPrepareParamsStack", params={"params.acceptParamNames", "countryId", "validation.validateAnnotatedMethodOnly", "true", "validation.excludeMethods", "getStateList"})})
public String getStateList() throws Exception
{
System.out.println("countryId = "+countryId);
stateTables=springService.findStatesByCountryId(countryId);
return ActionSupport.SUCCESS;
}
Ta metoda jest wywoływana, gdy kraj jest wybrany w menu icountryId
dostarczany jako parametr ciągu zapytania, ale jak zwrócić / odwzorować tę listę,stateTables
zainicjować / wypełnić<s:select>
menu stanu?
Wcześniej użyłem JSON z Jacksonem i Gsonem w Spring MVC. Używając Gsona, na przykład, odpowiedź JSON mogłaby być po prostu odwzorowana w następujący sposób (używając prostego serwletu).
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.io.IOException;
import java.io.PrintWriter;
import java.lang.reflect.Type;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "AjaxMapServlet", urlPatterns = {"/AjaxMapServlet"})
public class AjaxMapServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
Map<String, String>map=new HashMap<String, String>();
map.put("1", "India");
map.put("2", "America");
map.put("3", "England");
map.put("4", "Japan");
map.put("5", "Germany");
Type type=new TypeToken<Map<String, String>>(){}.getType();
Gson gson=new Gson();
String jsonString=gson.toJson(map, type);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonString);
}
}
iw JSP toMap
można napisać w następujący sposób.
$('#btnMap').click(function() {
$.get('/TestMVC/AjaxMapServlet', function(responseJson) {
var $select = $('#mapSelect');
$select.find('option').remove();
$('<option>').val("-1").text("Select").appendTo($select)
$.each(responseJson, function(key, value) {
$('<option>').val(key).text(value).appendTo($select);
});
});
})
<input type="button" id="btnMap" name="btnMap" value="Map"/><br/>
<select id="mapSelect" name="mapSelect"><option>Select</option></select>
<select>
zostanie wypełniony po naciśnięciu danego przycisku,btnMap
.
A co ze Struts2? Jak wypełnić<s:select>
oparty na innym<s:select>
?