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

Posted 2023-02-26

【中文标题】将 li 列表从客户端传递给 Spring MVC 控制器

【英文标题】：Pass a list of li from client to Spring MVC controller

【发布时间】：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 是否符合您的需要。

我想将列表中的所有值一起发送。

【参考方案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);

        
    );