java spring 调用不同的选择器
java spring with call different selector
我有这个代码html:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script>
<form action="#" th:action="@{/}" th:object="${person}">
<select id="person" th:field="*{name}">
<option th:each="p : ${list}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
<input type="submit" onclick="cargaDatos()" value="CargarDatos"/>
</form>
<div th:fragment="selector">
<form action="#" th:action="@{/prueba}" th:object="${prueba}">
<select id="prueba">
<option th:each="p : ${lista}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
</form>
</div>
<button type="submit">informe</button>
<script type="text/javascript"> function cargaDatos() {
$.ajax({ type: "GET",
url: "http://localhost:8080/prueba", success:
function(data){ alert("Ejecutado correctamente"); }, error: function
(data){ alert("Error en la ejecucion"); } }); } </script>
</body>
</html>
Java中的这段代码:
@RequestMapping(value="/", method=RequestMethod.GET)
public String showForm(Person person, Model model) {
System.out.println("/");
List<Person> list = new ArrayList<Person>();
Person p1 = new Person();
p1.setName("John");
p1.setAge(46);
Person p2 = new Person();
p2.setName("Helen");
p2.setAge(34);
list.add(p1);
list.add(p2);
model.addAttribute("list",list);
return "form";
}
@RequestMapping(value="/prueba", method=RequestMethod.GET)
public String showForm(Person person, Prueba prueba, Model model) {
System.out.println("/prueba");
List<Prueba> lista = new ArrayList<Prueba>();
Prueba p11 = new Prueba();
p11.setName("prueba1");
Prueba p22 = new Prueba();
p22.setName("prueba2");
lista.add(p11);
lista.add(p22);
model.addAttribute("lista",lista);
return "form :: selector";
}
@RequestMapping(value="/", method=RequestMethod.POST)
public String checkPersonInfo(Person person1) throws InterruptedException {
persona = person1.getName();
System.out.printf("1-el nombre seleccionado es: %s \n", persona);
return "redirect:/prueba";
}
@RequestMapping(value="/prueba", method=RequestMethod.POST)
public String checkPersonInfo(Prueba prueba) {
System.out.printf("2-el nombre seleccionado es: %s \n", prueba.getName());
return "redirect:/prueba";
}
而且我希望当用户按下底部时,选择器 2 在选择器 1 的功能选项选择中显示选项。但我希望屏幕始终显示选择器。
问题是什么?我不知道我该怎么做。
我猜你想在单击按钮后用数据填充选择器,但你不想重新加载页面?
问题是你将输入提交按钮绑定到一个函数,所以如果你点击它,你将提交数据并转到另一个页面。
我建议您再创建一个按钮并将函数绑定到它:
<button type="button" onclick="cargaDatos()">Your button text</button>
javaScript函数:
function cargaDatos(){
var link = /*[[@/prueba]]*/ 'prueba';
$("#selectorDiv").load(link);
};
和 html 选择器:
<div id="selectorDiv">
<select id="prueba">
<option th:each="p : ${lista}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
</div>
我有这个代码html:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script>
<form action="#" th:action="@{/}" th:object="${person}">
<select id="person" th:field="*{name}">
<option th:each="p : ${list}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
<input type="submit" onclick="cargaDatos()" value="CargarDatos"/>
</form>
<div th:fragment="selector">
<form action="#" th:action="@{/prueba}" th:object="${prueba}">
<select id="prueba">
<option th:each="p : ${lista}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
</form>
</div>
<button type="submit">informe</button>
<script type="text/javascript"> function cargaDatos() {
$.ajax({ type: "GET",
url: "http://localhost:8080/prueba", success:
function(data){ alert("Ejecutado correctamente"); }, error: function
(data){ alert("Error en la ejecucion"); } }); } </script>
</body>
</html>
Java中的这段代码:
@RequestMapping(value="/", method=RequestMethod.GET)
public String showForm(Person person, Model model) {
System.out.println("/");
List<Person> list = new ArrayList<Person>();
Person p1 = new Person();
p1.setName("John");
p1.setAge(46);
Person p2 = new Person();
p2.setName("Helen");
p2.setAge(34);
list.add(p1);
list.add(p2);
model.addAttribute("list",list);
return "form";
}
@RequestMapping(value="/prueba", method=RequestMethod.GET)
public String showForm(Person person, Prueba prueba, Model model) {
System.out.println("/prueba");
List<Prueba> lista = new ArrayList<Prueba>();
Prueba p11 = new Prueba();
p11.setName("prueba1");
Prueba p22 = new Prueba();
p22.setName("prueba2");
lista.add(p11);
lista.add(p22);
model.addAttribute("lista",lista);
return "form :: selector";
}
@RequestMapping(value="/", method=RequestMethod.POST)
public String checkPersonInfo(Person person1) throws InterruptedException {
persona = person1.getName();
System.out.printf("1-el nombre seleccionado es: %s \n", persona);
return "redirect:/prueba";
}
@RequestMapping(value="/prueba", method=RequestMethod.POST)
public String checkPersonInfo(Prueba prueba) {
System.out.printf("2-el nombre seleccionado es: %s \n", prueba.getName());
return "redirect:/prueba";
}
而且我希望当用户按下底部时,选择器 2 在选择器 1 的功能选项选择中显示选项。但我希望屏幕始终显示选择器。
问题是什么?我不知道我该怎么做。
我猜你想在单击按钮后用数据填充选择器,但你不想重新加载页面?
问题是你将输入提交按钮绑定到一个函数,所以如果你点击它,你将提交数据并转到另一个页面。
我建议您再创建一个按钮并将函数绑定到它:
<button type="button" onclick="cargaDatos()">Your button text</button>
javaScript函数:
function cargaDatos(){
var link = /*[[@/prueba]]*/ 'prueba';
$("#selectorDiv").load(link);
};
和 html 选择器:
<div id="selectorDiv">
<select id="prueba">
<option th:each="p : ${lista}" th:value="${p.getName()}" th:text="${p.getName()}"></option>
</select>
</div>