在spring mvc中提交表单而不刷新页面答案

【问题标题】：Submit form without refreshing page in spring mvc在spring mvc中提交表单而不刷新页面
【发布时间】：2014-06-24 13:57:49
【问题描述】：

我有一个 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>

【问题讨论】：

你试过用ajax吗？
要么使用 AJAX，要么修改你的服务器端代码将两者绑定在一起。
我只是更新我的问题，这是我写的代码

标签： jquery ajax jsp spring-mvc

【解决方案1】：

当我提交表单时，我丢失了 listbox2 的数据，我必须再次在 listbox1 中重新选择。

您还没有提到如何绑定表单数据并从 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>

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

@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;
    }
}

【讨论】：

【解决方案2】：

你应该使用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>

【讨论】：

我的情况是什么人？