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

Posted 2023-05-07

【中文标题】JQuery Ajax Mysql 数据检索获得额外的回车并出现在 textarea

【英文标题】：JQuery Ajax Mysql data retrieval getting extra carriage returns and appearing in textarea

【发布时间】：2020-06-27 04:28:12

【问题描述】：

我有点神秘。我已经完成了几次类似的代码，但这次它的行为很奇怪。

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

步骤： 1. 将 textarea 内容存储到数据库。示例数据可能是：“狐狸跳得很高” 2.检索数据并显示在另一个textarea框中进行编辑 3. textarea 显示检索到的文本，但有额外的 3 行返回。

我的存储调用：主程序

$(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 查看数据库，它没有显示多余的空格或换行符。

我的 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 显示没有多余的空格或换行。

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

AJAX 成功调用时 $('#comment2x').val(data);将它放在 textarea 中，textarea 显示额外的行返回 - 准确地说是 3。

文本区域的 html 是：

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

我还能做些什么来解决此问题并消除这些额外的线路返回显示？

【问题讨论】：

您的服务器最好通过使用结构 json 字符串正确响应，而不是简单地回显字符串，而不是简单的 echo 'blah blah;' 而是 echo json_encode(['status' =? 'success', 'data' => 'whatever you need to respond back']);，然后您可以防止某种额外的空格跨度>

谢谢 - 使用 Json 有效，但仍然是一个谜，为什么在这种特殊情况下，Mysql 代码/服务器会添加额外的行返回。我将 Mysql 代码自己复制到另一个文件中，并让 Ajax 访问该文件，它工作正常。但是原始文件中的相同代码（与其他代码），添加了换行符...！

【参考方案1】：

从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
       


    
);

【讨论】：

谢谢桑迪普和凯文。使用 Json 确实解决了这个问题。然而，一个谜 - 我将与其他 Mysql 代码混合在一起的原始 Mysql 检索代码复制到另一个文件中，并且无需修改即可正常工作。仍然不知道为什么原来的添加了额外的换行符，因为孤立的没有...！

【参考方案2】：

只是想我会发布解决问题的 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
    
);