如何按顺序获取UL列表中的名称并通过Ajax POST提交？

嘿，我来帮你搞定这个问题！要把testCaseList里的名称提取出来并存入变量，再通过Ajax POST发送到后端，你可以按照下面的步骤操作：

1. 提取列表中的名称 #

我们可以用jQuery的.map()方法遍历每个<li>元素，提取其中的纯文本内容（自动去除多余空格和后面图标区域的干扰），最后把结果转换成数组：

// 获取所有li元素，提取名称并转为数组
var testCaseNames = $('#testCaseList li').map(function() {
    // 提取li的文本并去除前后空格，得到纯净的名称
    return $(this).text().trim();
}).get();

执行这段代码后，testCaseNames就是你需要的数组：["xzxc", "sdad"]，完全符合你的预期。

2. 修正Ajax请求代码 #

你原来的代码有个小问题：在定义testCaseNames之前就把它作为请求数据传递了，这会导致变量未定义的错误。我们把提取名称的逻辑放在Ajax请求之前，再发送请求：

$('#btnSubmit').click(function (e) {
    e.preventDefault();
    
    // 第一步：先提取名称列表
    var testCaseNames = $('#testCaseList li').map(function() {
        return $(this).text().trim();
    }).get();
    
    // 第二步：发送Ajax POST请求
    $.ajax({
        type: 'post',
        url: '/create-flow/save',
        data: { testCaseNames: testCaseNames },
        success: function(code) {
            // 请求成功后的处理逻辑，比如打印返回结果或提示用户
            console.log('保存成功！返回码：', code);
        },
        error: function(xhr, status, error) {
            // 加上错误处理，方便调试问题
            console.error('请求出错：', error);
        }
    });
});

3. 完整可运行代码示例 #

把所有部分整合起来，完整的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="testCaseList" class="list-group testCaseList">
    <li class="list-group-item justify-content-between" draggable="false" style="">xzxc 
        <div class="icons-right">
            <a class="action-icon" id="edit-xzxc" name="xzxc" draggable="false"><span class="fa fa-edit"></span></a>
            <a class="action-icon" id="delete-xzxc" name="xzxc" draggable="false"><span class="fa fa-trash"></span></a>
        </div>
    </li>
    <li class="list-group-item justify-content-between" draggable="false" style="">sdad 
        <div class="icons-right">
            <a class="action-icon" id="edit-sdad" name="sdad" draggable="false"><span class="fa fa-edit"></span></a>
            <a class="action-icon" id="delete-sdad" name="sdad" draggable="false"><span class="fa fa-trash"></span></a>
        </div>
    </li>
</ul>
<button id="btnSubmit">Submit</button>

<script>
$('#btnSubmit').click(function (e) {
    e.preventDefault();
    
    var testCaseNames = $('#testCaseList li').map(function() {
        return $(this).text().trim();
    }).get();
    
    $.ajax({
        type: 'post',
        url: '/create-flow/save',
        data: { testCaseNames: testCaseNames },
        success: function(code) {
            console.log('保存成功！', code);
        },
        error: function(xhr, status, error) {
            console.error('请求失败：', error);
        }
    });
});
</script>

这样点击Submit按钮时，就会把提取到的名称数组通过POST请求发送到你指定的后端接口啦~

内容的提问来源于stack exchange，提问作者user9176898