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

Posted 2023-05-07

【中文标题】在 ajax 请求收据中设置文本字段

【英文标题】：Set a text field within a ajax request receipt

【发布时间】：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

【参考方案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>

【讨论】：

谢谢，感谢您的帮助