在spring mvc中提交没有刷新页面的表单

时间:2014-06-24 13:57:49

标签: jquery ajax jsp spring-mvc

我有一个listbox2,它根据listbox1中选择的内容填充。因此,当我提交表单时,我丢失了listbox2的数据,我必须再次在listbox1中重新选择。 如何在提交后将数据保存在listbox2中?

<form:form action="choseElement" method="post"> 
<select name="listbox1">
 <j:forEach items="${elementList}" var="elem">
   <option>${elem.name}</option>
 </j:forEach>
</select>
</form:form>
<form:form action="addProduct" method="post"> 
 <input type="text" name="nameProd">
 <select name="listbox2">
 <j:forEach items="${LPbyElement}" var="lp">
   <option>${lp.name}</option>
 </j:forEach>
 </select>
</form:form>

2 个答案:

答案 0 :(得分:0)

你应该使用Ajax来实现这个

    function getSubList(val){
           $.ajax({
                url: 'your-url',
                type: 'post',
                data: {param:val},
                success: function (msg) {
                    $('#id-of-sublist').html(msg);
                },

            });
    }

现在,在您的第一个列表中,您可以拨打onChange(this.value)

注意:您的服务器应返回以下格式的值

<option>value1</option>
<option>value2</option>

答案 1 :(得分:0)

  

当我提交表单时,我丢失了listbox2的数据,我必须这样做   再次在列表框1中重新选择。

你还没有提到如何绑定你的表单数据并从jsp传递给控制器​​,我在考虑你有如下的模型bean:

用于保存表单数据的ProductBean类:

public class ProductBean {

private String listbox1Selected;
private String listbox2Selected;

  //no-arg constructor, getters and setters
}

在列表框或选择框中加载选项的选项类:

public class Option {    
    private String name;

    public Option(){}

    public Option(String name) {
        super();
        this.name = name;
    }
}

并在jsp中使用如下所示在表单提交后选择选项:

<form:form method="post" modelAttribute="productBean">
    <label  for="listbox1">listbox1:</label>
    <form:select path="listbox1Selected">
        <option value="NONE">--listbox1--</option>
        <form:options items="${listbox1Options}" itemValue="name" itemLabel="name"/>
    </form:select>

    <label  for="listbox2">listbox2:</label>            
    <form:select path="listbox2Selected">
        <option value="NONE">--listbox2--</option>
        <form:options items="${listbox2Options}" itemValue="name" itemLabel="name"/>
    </form:select>

    <input type="submit" />
</form:form>

并在控制器中返回产品模型bean,传递给POST参数的是什么。

@Controller
@RequestMapping("/selectBox")
public class SelectBoxController {

    @RequestMapping(method=RequestMethod.GET)
    public String showSelectBox(Model model){

        model.addAttribute("productBean", new ProductBean());
        return "selectBox";
    }

    @RequestMapping(method=RequestMethod.POST)
    public String showSelectBox(@ModelAttribute("productBean")ProductBean productBean, BindingResult result, ModelMap model){
        System.out.println(productBean);
        model.addAttribute("productBean", productBean);
        return "selectBox";
    }

    @ModelAttribute("listbox1Options")
    public List<Option> populateOpt(){
        List<Option> lst = new ArrayList<Option>();
        lst.add(new Option("Op1"));
        lst.add(new Option("Op2"));
        lst.add(new Option("Op3"));
        return lst;
    }

    @ModelAttribute("listbox2Options")
    public List<Option> populateOpt2(){
        List<Option> lst = new ArrayList<Option>();
        lst.add(new Option("Op4"));
        lst.add(new Option("Op5"));
        lst.add(new Option("Op6"));
        return lst;
    }
}