在javascript函数中构建DOM元素时不生成HTML_Javascript_Html_Ajax

在javascript函数中构建DOM元素时不生成HTML

javascript html ajax

在javascript函数中构建DOM元素时不生成HTML,javascript,html,ajax,Javascript,Html,Ajax,我使用JavaScript检索URL参数，并使用AJAX将其传递给PHP，以查询返回字符串的数据库在AJAX成功的情况下，我使用了一个调用另一个函数的函数，通过for循环生成HTML字符串，并将其推送到数组中然后我将其分配给DOM elements innerHTML属性，但没有生成HTML 我在函数中尝试了console.log，以查看是否确实从数据库中获取了字符串，我确实是这样做的我做错了什么这是我的密码 <html> <head> <

我使用JavaScript检索URL参数，并使用AJAX将其传递给PHP，以查询返回字符串的数据库

在AJAX成功的情况下，我使用了一个调用另一个函数的函数，通过for循环生成HTML字符串，并将其推送到数组中

然后我将其分配给DOM elements innerHTML属性，但没有生成HTML

我在函数中尝试了console.log，以查看是否确实从数据库中获取了字符串，我确实是这样做的

我做错了什么

这是我的密码

<html>
    <head>
    <script src=http://localhost:81/jquery-3.6.0.min.js></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/style.css">
</head>
<body>
<div class="container">
</div>
<script type="application/javascript">
function query_string(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}
//Getting the parameter-
v = query_string('v');
console.log(v);

//////////////////////////////////////////
var transcript_from_db = {};

function getTranscript(){
    $.ajax(
    {
        type:       "POST",
        dataType:   "text",
        url:        "query2.php",
        data:       "v="+v,
        success:    function(response){
                        transcript_from_db = response;
                        onAjaxSuccess();
                    },

    }
);
};
getTranscript();
function onAjaxSuccess(){
    var thestring = transcript_from_db;
    console.log(thestring);
    var chats=[];
 for (var chat in thestring.data){
  var str='';
  thestring.data[chat].forEach(ch=>str+='<div class="msg"><div class="'+ch.type+'"><div class="txt"><span class="name">'+ch.pop_name+'</span><span class="timestamp">'+ch.timestamp+'</span><span class="message">'+ch.msg+'</span></div></div></div>')
  chats.push(str)
 }
 document.getElementsByClassName('container')[0].innerHTML=chats.join('<div>');
}
/////////////////////////////////////////////////////
</script>
</body>
</html>


函数查询\u字符串（变量）
{
var query=window.location.search.substring（1）；
var vars=query.split（&）；
对于（变量i=0；istr+=''+ch.pop_name+''+ch.timestamp+''+ch.msg+''）
聊天推送（str）
}
document.getElementsByClassName（'container'）[0]。innerHTML=chats.join（“”）；
}
/////////////////////////////////////////////////////

如果我将测试字符串分配给函数外部的变量，并在函数外部执行for循环，则效果良好

像这样：

thestring = {
  data: {
    chat: [{
  msg: "Hello there",
  pop_name: "Customer",
  timestamp: "17:05 PM",
  type: "bubble"
}, {
  msg: "Hi John! How can I help you?",
  pop_name: "Dialogflow",
  timestamp: "17:05 PM",
  type: "bubble alt"
}, {
  msg: "My dishwasher is broken!",
  pop_name: "Customer",
  timestamp: "17:06 PM",
  type: "bubble"
}, {
  msg: "Sorry to hear that but maybe I can help you!",
  pop_name: "Dialogflow",
  timestamp: "17:06 PM",
  type: "bubble alt"
}, {
  msg: "Can you tell me what model number is your diswhaser?",
  pop_name: "Dialogflow",
  timestamp: "17:06 PM",
  type: "bubble alt"
}]
  }
}  
var chats=[];
 for (var chat in thestring.data){
  var str='';
  thestring.data[chat].forEach(ch=>str+='<div class="msg"><div class="'+ch.type+'"><div class="txt"><span class="name">'+ch.pop_name+'</span><span class="timestamp">'+ch.timestamp+'</span><span class="message">'+ch.msg+'</span></div></div></div>')
  chats.push(str)
  console.log(chats);
 }
 document.getElementsByClassName('container')[0].innerHTML=chats.join('<div>');

thestring={
数据：{
聊天：[{
msg：“你好”，
pop_名称：“客户”，
时间戳：“17:05 PM”，
类型：“气泡”
}, {
msg：“嗨，约翰！我能为你做什么？”，
pop_名称：“Dialogflow”，
时间戳：“17:05 PM”，
类型：“气泡高度”
}, {
味精：“我的洗碗机坏了！”，
pop_名称：“客户”，
时间戳：“17:06 PM”，
类型：“气泡”
}, {
味精：“很抱歉听到这个消息，但也许我可以帮你！”，
pop_名称：“Dialogflow”，
时间戳：“17:06 PM”，
类型：“气泡高度”
}, {
msg：“你能告诉我你的迪斯瓦瑟是什么型号的吗？”，
pop_名称：“Dialogflow”，
时间戳：“17:06 PM”，
类型：“气泡高度”
}]
}
}  
var-chats=[]；
for（字符串数据中的var chat）{
var-str=''；
字符串.data[chat].forEach（ch=>str+=''+ch.pop\u name+''+ch.timestamp+''+ch.msg+''）
聊天推送（str）
控制台日志（聊天）；
}
document.getElementsByClassName（'container'）[0]。innerHTML=chats.join（“”）；

其结果是：

我最终将该对象作为有效的JSON字符串保存在数据库中，然后，一旦检索到，我使用JSON解析将其分配给一个对象

这就解决了问题。

您称之为“字符串”，谈论“字符串”，将

数据类型设置为“text”，但需要一个对象，并将其视为文本。这里发生了什么？chats.join（“”）
在这些消息之间注入一个未关闭的
。当然，浏览器会以某种方式将其关闭，但您要求的是意外行为thestring={}
在测试中，您是将其分配给对象，而不是字符串。您确定您的响应是这样的JS对象而不是字符串吗？@T J从数据库返回的字符串与我指定给字符串对象的文本示例中的字符串完全相同。我试图通过将其写入控制台来证明这一点。您有数据类型：“text”
？