将 li 列表从客户端传递给 Spring MVC 控制器答案

【问题标题】：Pass a list of li from client to Spring MVC controller将 li 列表从客户端传递给 Spring MVC 控制器
【发布时间】：2016-06-09 09:43:23
【问题描述】：

我想在提交中向 Spring 控制器发送值列表。该列表在客户端中发生动态变化。我查看了this 但仅适用于输入，因为我无法在标签 li 中输入名称。

<ul id="paramselected" class="paramsnav" class="dropdown">
    <li class="ui-widget-content selected">value1</li>
    <li class="ui-widget-content selected">value2</li>
    ...                 
</ul>

有没有办法实现？

任何帮助将不胜感激，

谢谢。

【问题讨论】：

想要发送整个列表还是只发送选定的单个值（一次）？
查看following 是否符合您的需要。
我想将列表中的所有值一起发送。

标签： java html spring-mvc

【解决方案1】：

请注意，<ul> 数据不会发送到服务器，因为它不是用户输入组件。

查看下面的链接

Trying to get some kind of dynamic, unordered list to send the order to servlet

但如果您想发送所有值，您可以通过 javascript 或 ajax 发送它，方法是在 javascript 中获取 <li> 值并发送到 servlet。

【讨论】：

【解决方案2】：

您可以使用 javascript POST（使用 XMLHttpRequest）发布数据，从列表中检索数据并发送。

【讨论】：

【解决方案3】：

使用 jquery 获取 li 标签的值，然后创建一个数组并以数组作为请求参数调用控制器。

【讨论】：

【解决方案4】：

<ul id="paramselected" class="paramsnav" class="dropdown">
  <li class="ui-widget-content selected"><input type="hidden" value="value1" name="liContent">value1</li>
  <li class="ui-widget-content selected"><input type="hidden" value="value2" name="liContent">value2</li>  
  <li class="ui-widget-content selected"><input type="hidden" value="value3" name="liContent">value3</li>              
</ul>

你的控制器应该是这样的：

@RequestMapping(value="/actionName")
  public String getLiValues(HttpServletRequest request){
    String[] liValues = request.getParameterValues("liContent");
  }

您的数组已准备好 li 值。

【讨论】：

【解决方案5】：

AFAIK，正常行为是只有输入元素从<form> 提交到 servlet。你可以通过jquery发布它

$(document).ready(function(){
    $("#button").click(function(){
        var arr = [];
        // get the text from li's
        $('#paramselected li').each(function(index) {
          arr.push($(this).text());
        });
        $.post("URLMapped",
        {
          liValues: arr; // arr contains your li texts
        },
        function(data,status){
            // your response here
        });
    });
});

【讨论】：

【解决方案6】：

您可以为此使用 js 或 jquery ajax 请求。您可以在 js 中找到所有不同的 li 值，然后描述 var obj。其中有 li 值并调用 ajax 方法：

$.ajax({
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        mimeType: 'application/json',
        async: true,
        url: url,
        data: obj,
        success: function (result) {
            console.log(result);

        }
    });

【讨论】：