如何向JSON数组添加页面文本与值，构建合规请求数据

问题 #

现有初始JSON消息数组：

{
    "user": "someuser",
    "message": "need a help"
},
{
    "user": "bot",
    "message": "can i help you?"
},
{
    "user": "someuser",
    "message": "another question"
}

需要从页面读取额外段落内容，添加到JSON对象后发送至服务器（消息数量约10-20条）。其中.client-mess和.bot-mess已通过JSON数据填充，.edited-phrase和.phrase-return为页面已存在元素，AJAX发送逻辑无问题，核心难点是构建正确的JSON数据。

目标JSON结构如下：

{
    "user": "someuser",
    "message": "need a help",
    "edited": "hello",
    "return": "return on step_1"
},
{
    "user": "bot",
    "message": "can i help you?"
},
{
    "user": "someuser",
    "message": "another question",
    "edited": "forget",
    "return": "return on step_3"
}

页面HTML结构及未完成的jQuery代码：

<div class="message-row">
    <div class="client-say">
        <p class="client-mess" data-user="someuser">need a help</p>
        <div class="return-container">
            <p class="edited-phrase">hello</p>
            <p class="phrase-return">return on step_1</p>
        </div>
    </div>
</div>
<div class="message-row">
    <div class="bot-say">
        <p class="bot-mess" data-user="bot">can i help you?</p>
    </div>
</div>
<div class="message-row">
    <div class="client-mess" data-user="someuser">
        <p class="client-mess">another question</p>
        <div class="return-container">
            <p class="edited-phrase">forget</p>
            <p class="phrase-return">return on step_3</p>
        </div>
    </div>
</div>
<div class="">
    <a id="sendJson" href="#" class="">send Json</a>
</div>
</div>

$('#sendJson').on('click', function() {
    var messagesArray = [];
    $dialogMessages = {};
    $(" .container .message-row")
    .each(function () {
    
        $dialogMessages = {
        
            user:$(this).data('user'),
            
          
            
            /* message:$(this).text(),
            phraseEdited: ,
            phraseReturn: , */
            
            
        }

        messagesArray.push($dialogMessages);

    });
     
 })

请协助完善代码，实现正确构建目标JSON数组的需求。

解决方案 #

以下是完善后的jQuery代码，可正确构建目标JSON数组：

$('#sendJson').on('click', function(e) {
    // 阻止链接默认跳转行为
    e.preventDefault();
    
    var messagesArray = [];
    
    $(".message-row").each(function() {
        var $row = $(this);
        var dialogMsg = {};
        
        // 提取用户身份和消息内容：区分用户消息和机器人消息
        var $clientMsg = $row.find('.client-mess[data-user]');
        var $botMsg = $row.find('.bot-mess[data-user]');
        
        if ($clientMsg.length) {
            dialogMsg.user = $clientMsg.data('user');
            dialogMsg.message = $clientMsg.text().trim();
        } else if ($botMsg.length) {
            dialogMsg.user = $botMsg.data('user');
            dialogMsg.message = $botMsg.text().trim();
        }
        
        // 按需添加编辑内容和返回步骤字段
        var $edited = $row.find('.edited-phrase');
        var $return = $row.find('.phrase-return');
        
        if ($edited.length) {
            dialogMsg.edited = $edited.text().trim();
        }
        if ($return.length) {
            dialogMsg.return = $return.text().trim();
        }
        
        // 仅加入有效消息对象（确保user和message存在）
        if (dialogMsg.user && dialogMsg.message) {
            messagesArray.push(dialogMsg);
        }
    });
    
    // 此处可添加AJAX发送逻辑，示例：
    // $.ajax({
    //     url: '你的服务器接口地址',
    //     method: 'POST',
    //     contentType: 'application/json',
    //     data: JSON.stringify(messagesArray),
    //     success: function(res) {
    //         console.log('发送成功', res);
    //     }
    // });
    
    // 测试用：打印构建好的JSON结构
    console.log(JSON.stringify(messagesArray, null, 2));
});

核心修正点： #

1. 修正用户身份获取逻辑：原代码错误从message-row取data-user，实际该属性在.client-mess或.bot-mess元素上，改为从对应消息元素提取。
2. 区分消息类型：分别处理用户消息和机器人消息，确保message内容提取准确。
3. 按需添加字段：仅当页面存在.edited-phrase和.phrase-return元素时，才添加对应字段，避免空值冗余。
4. 数据合法性校验：只有包含user和message的有效对象才会被加入数组，过滤无效数据。
5. 阻止默认行为：添加e.preventDefault()避免点击链接时页面跳转。

内容的提问来源于stack exchange，提问作者Владимир Солёный