使用 JavaScript 将 ajax 的结果附加到文本区域

Posted 2023-05-07

【中文标题】使用 JavaScript 将 ajax 的结果附加到文本区域

【英文标题】：Appending a result from ajax into a textarea using JavaScript

【发布时间】：2017-11-16 00:01:25

【问题描述】：

如何将 ajax 的结果附加到文本区域？我正在使用代码点火器。我想将控制器中的值附加到 textarea。

这是在我的控制器中传递的查询结果，将附加到我的文本区域中：

checkup_diagnosis: [2]
  0: Object
     diagnosis: "Java"
  1: Object
     diagnosis: "Scala"

现在我希望将这两个值插入到我的文本区域中。这是我尝试过的，#modaldiagnosis 是我的 textarea 的 ID：

function view_profile(check_up_date,check_up_id) 
 $.ajax(
    url: siteurl+"search_records/view_profbtn",
    type: "POST",
    data: check_up_id:check_up_id, check_up_date:check_up_date,
    dataType: "JSON",
    success: function(data)
        for(i=0;i<data.length;i++) 
             $('#modaldiagnosis').append(data['checkup_diagnosis'][i]['diagnosis']);  
        
    
  );

【参考方案1】：

您可以使用.val() 来设置 textarea 元素的内容。要附加到现有值，您可以这样做：

var md = $("#modaldiagnosis")
md.val(md.val() + valueToAppendHere)

但是，在循环中重复更新同一个 DOM 元素并不是一个好主意。最好使用循环创建一个要追加的字符串，然后更新一次 DOM 元素，在循环之后。

此外，您可能希望在每个值之间添加换行符或逗号或其他内容。这是一种方法：

var data = 
  checkup_diagnosis: [
     diagnosis: "Java" ,
     diagnosis: "Scala" 
  ]


$("button").click(function()      // button with click handler for demo purposes only

  var newData = data['checkup_diagnosis']        // take the input array,
    .map(function(v)  return v['diagnosis'] )  // map it to get the required values,
    .join(", ")                                  // join the result with commas
  var md = $('#modaldiagnosis')
  md.val(md.val() + newData)
  
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="modaldiagnosis"></textarea>
<button>Test</button>

显然，当我在演示中使用按钮单击时，您会得到一些 Ajax 代码。您可以在演示中看到数据被添加到文本区域中已有内容的末尾 - 测试是否已经存在值并添加额外的逗号（或您想要的任何其他格式）作为练习留给读者...

【讨论】：

哇。很好的答案。我会更新我的问题。请坦白我的情况谢谢..

关于您的更新，只需将我在演示中的单击处理程序的内容放入您的 Ajax 成功处理程序中，它应该可以正常工作。

我需要这个吗？ var newData = data['checkup_diagnosis'] // 获取输入数组，.map(function(v) return v['diagnosis'] ) // 映射它以获得所需的值，.join(", ")我的数据在 ajax 数据中

对不起先生我还是个php初学者

是的。获取我在点击处理程序中显示的五行代码，以 var newData =... 开头并以 md.val(md.val() + newData) 结尾，并将它们放入您的 success 函数中（在删除现有的 for 循环之后）。

【参考方案2】：

我相信你会需要

for(i=0; i<data['checkup_diagnosis'].length; i++) 
    $('#modaldiagnosis').append(data['checkup_diagnosis'][i]['diagnosis']);  

【讨论】：

for(i=0; i

nnnnnn 的答案要好得多，请遵循 :)