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>