在 ajax 请求收据中设置文本字段答案

【问题标题】：Set a text field within a ajax request receipt在 ajax 请求收据中设置文本字段
【发布时间】：2016-08-26 13:54:50
【问题描述】：

我想根据 ajax 请求的响应在文本区域显示一些文本。

<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b></b> <%=session.getAttribute( "username" )%> </p>
    </div>

    <!-- This div will contain the chatlog. --> 
    <div id="chatbox"></div>

    <form name="message" action="" method="post">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
    </form>
</div>

我想在 ajax 请求响应中设置“聊天框”文本。这是聊天框的css文档

#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#fff;
    height:270px;
    width:430px;
    border:1px solid #ACD8F0;
    overflow:auto; }

这是ajax调用

function loadLog(){     
    $.ajax({
        type: "GET",
        url: "HandleMessage",
        //contentType: "application/json", 
        /*data: {
            card: JSON.stringify(card)
        },*/
        success: function(response) {                
            if(response != null)
            {
                $("#chatbox").attr("value", "aa"); // I want to concat current value and response here
            }               
                //document.getElementById('chatbox').value = 'fff';
                //alert(response);
        },
        error: function(data) {
            alert('errorr');
            }
    });

尝试了很多东西，但没有奏效。

试过了，

$("#chatbox").attr("value", response);
$("#chatbox).val(response);
$(".chatbox").html(response);

【问题讨论】：

使用$("#chatbox").html('whatever') 但为什么它是textarea 而不是div 或任何其他正常元素？ textareas 用于向服务器发送数据，而不是向用户显示内容。
有效！感谢您的帮助
除了获取当前值并将响应添加到其中之外，还有更简单的方法来连接响应吗？
我并没有真正明白......你在代码中的哪里连接它？
我需要$("#chatbox").html(stringvalue)的地方，stringvalue应该是text field的当前值+response

标签： html ajax textfield

【解决方案1】：

这是使用 jQuery（带有延迟）编写 AJAX 的首选方式

$.ajax({
    type        : "GET",
    url         : "HandleMessage",
    contentType : "application/json", 
    data        : {
        card: JSON.stringify(card)
    }
})
.done(function(RES){
    if( RES )
        $("#chatbox")[0].innerHTML += RES;

})
.fail(function(){
    alert('error');
});

【讨论】：

$("#chatbox")[0].innerHTML = $("#chatbox")[0].innerHTML + '\n' + response; 不添加新行？
太棒了。非常感谢您的帮助

【解决方案2】：

您希望在更新输入值字段时使用val

$('#chatbox').val('aa')

在评论中您询问将现有字段值与响应连接起来：

$('#chatbox').val($('#chatbox').val() + response)

【讨论】：

如何将当前文本字段值与响应连接起来？
感谢您的帮助

【解决方案3】：

你已经接近解决方案了：

$("#chatbox").html(response);

【讨论】：

【解决方案4】：

如textContent 中所述，您可以用javascript编写：

document.getElementById('chatbox').textContent+= response;

一个例子，基于github api，在下面sn-p中报（我没有在输出上使用任何格式，这只是一个例子。）

如果你需要获取JSON数据，使用jQuery你可以直接使用getjson。

function loadLog(e) {
  e.preventDefault();
  var name = document.getElementById('usermsg').value;
  $.ajax({
    type: "GET",
    url: "https://api.github.com/users/repos",
    dataType: "json",
    data: {'name': name},
    success: function (response) {
      if (response != null) {
        document.getElementById('chatbox').textContent += JSON.stringify(response,response, 4, 4);
      }
    },
    error: function (data) {
      alert('errorr');
    }
  });
}

window.onload = function () {
  document.getElementById('submitmsg').addEventListener('click', loadLog, false);
}

#chatbox {
  text-align: left;
  margin: 0 auto;
  margin-bottom: 25px;
  padding: 10px;
  background: #fff;
  height: 270px;
  width: 430px;
  border: 1px solid #ACD8F0;
  overflow: auto;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b></b> &lt;%=session.getAttribute( "username" )%&gt; </p>
    </div>

    <!-- This div will contain the chatlog. -->
    <div id="chatbox"></div>

    <form name="message" action="" method="post">
        <input name="usermsg" type="text" id="usermsg" size="63"/>
        <input name="submitmsg" type="submit" id="submitmsg" value="Send"/>
    </form>
</div>

【讨论】：

谢谢，感谢您的帮助