JQuery Ajax Mysql 数据检索得到额外的回车 returns 并出现在 textarea 中

Question

我有点不解。我已经多次完成类似的代码并取得了预期的结果，但这次它表现得很奇怪。

从 Mysql 数据库通过 AJAX 到主调用程序的文本得到 3 个额外的回车符或行 returns 并且每次我显示它时，它都会添加这些不需要的行 returns 到文本框以进一步编辑。

步骤： 1.将textarea内容存入数据库。示例数据可以是：'The fox jumped high' 2.检索数据并显示在另一个textarea框中进行编辑 3. textarea 显示检索到的文本，但有额外的 3 行 returns.

我的存储调用：主程序

$(document).on('click', '#submit2', function(){
        event.preventDefault();
        var comment = $("#comment2x").val();        
        update = 'yes'//chooses to update not insert new
        console.log(comment);
        $.ajax({
                url:"/modules/feedback/feedback_ajax.php",
                method:"POST",
                data:{action:'save',
                      user_id:user_id,//global variable set at beginning
                      comment:comment,
                      details:details,
                      tab:tab,
                      update:update,
                      feedback_id:feedback_id
                  },
                success:function(data){;
                      //console.log(data);
                      $('#comment2x').val('');//clear text area
                      $(window).scrollTop(scroll_position);
                }
            }); 
     });

SQL更新码：feedback_ajax.php

if($_POST['action']=='save'){   
    $user_id = $_POST['user_id'];
    $comment = $_POST['comment'];
    $details = $_POST['details'];
    $tab = $_POST['tab']; 
    $update = $_POST['update'];//'yes' = update existing entry, 'no' = insert new entry
    $feedback_id = $_POST['feedback_id'];

    //insert into database    
    $sql = "INSERT INTO feedback (user_id,comment,details,tab,status) VALUES (?,?,?,?,?)";
    $db->prepare($sql)->execute([$user_id,$comment,$details,$tab,'New']);

我使用 phpMyAdmin 查看数据库，没有显示额外的空格或行 returns。

我的AJAX调用：主程序

$.ajax({//get raw comment from database
    url:"/modules/feedback/feedback_ajax.php",
    method:"POST",
    data:{action:'get_raw_comment',feedback_id:feedback_id},
    success:function(data){
        console.log('EDIT');
        console.log(data);
        $('#comment2x').val(data);
        $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
    }
});

另一端返回数据：feedback_ajax.php

if($_POST['action']=='get_raw_comment'){   
    $feedback_id = $_POST['feedback_id'];
        $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
        $stmt = $db->prepare($sql); 
        $stmt->execute(); 
        $row = $stmt->fetch();
        $comment = $row['comment'];
        echo $comment;
}

我使用 Xdebug，变量 $comment 显示没有多余的空格或行 returns.

在Ajax调用中，console.log(数据)；显示返回的数据 - Chrome 控制台显示额外的行 returns!!!

当AJAX成功调用$('#comment2x').val(data);将它放在文本区域中，文本区域显示额外的行 returns - 3 是准确的。

文本区域的 HTML 是：

<textarea class="form-control" name="article" id="comment2x"></textarea>

我还能做些什么来解决这个问题并消除这些额外的行 returns 出现？

Answer 1

return 来自 feedback_ajax.php 的数据 json 格式如下：-

$result = array();
if($_POST['action']=='get_raw_comment'){   
    $feedback_id = $_POST['feedback_id'];
        $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
        $stmt = $db->prepare($sql); 
        $stmt->execute(); 
        $result['success'] =  $stmt->rowCount();
        if($result['success'])
          $row = $stmt->fetch();

        $result['comment'] = $result['success'] ? $row['comment'] : ""; 
}
echo json_encode($result);

接收 json 格式的数据并继续

$.ajax({//get raw comment from database
    url:"/modules/feedback/feedback_ajax.php",
    method:"POST",
    dataType: 'json',                         //IMPORTANT TO RECEIVE DATA IN JSON
    data:{action:'get_raw_comment',feedback_id:feedback_id},
    success:function(data){
      if(data.success)
       {
          $('#comment2x').val(data.comment);
          $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
       }else
       {
          console.log(data);  //to check what data coming
       }


    }
});

Answer 2

只是想 post 我的 Json 版本解决了问题：

Mysql数据检索代码：

if($_POST['action']=='get_raw_comment'){   
    $result = array();
    $feedback_id = $_POST['feedback_id'];    
        $sql = "SELECT comment FROM feedback WHERE feedback_id=".$feedback_id;
        $stmt = $db->prepare($sql); 
        $stmt->execute(); 
        $row = $stmt->fetch();
        $comment = $row['comment'];
        $result['comment']=$comment;
        echo json_encode($result);
}

Ajax代码：

$.ajax({//get raw comment from database
    url:"/modules/feedback/feedback_ajax.php",
    method:"POST",
    dataType: 'json',
    data:{action:'get_raw_comment',feedback_id:feedback_id},
    success:function(data){
        console.log(data);               
        $('#comment2x').val(data.comment);
        $("#comment2x").height( $("#comment2x")[0].scrollHeight );//adjusts height of textarea to fit text
    }
});

JQuery Ajax Mysql 数据检索得到额外的回车 returns 并出现在 textarea 中

JQuery Ajax Mysql data retrieval getting extra carriage returns and appearing in textarea

javascript

php

ajax

jquery

textarea