Question

我想在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请求响应中设置'chatbox'文本。这是chatbox的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);

Answer 1

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

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

在评论中，您询问是否将现有字段值与响应进行连接：

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

Answer 2

这是使用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');
});

Answer 3

你接近解决方案：

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

Answer 4

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

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

基于github api的示例在以下片段中报告（我没有在输出中使用任何格式。这只是一个示例。）

如果你需要获取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>

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

4 个答案: