POST DIV 格式不正确后显示返回的 JSON 数组

Question

目前我正在使用 AJAX 发布到 PHP 页面（执行 SQL 命令并返回 JSON 数组 echo json_encode($runQueryArray);）。

我在使用$('#updateDisplay').append(''); 实际正确附加数据时遇到问题。它似乎正在吃 DIV 样式并显示无序。

这是返回的 JSON 数组：

[  
 {  
  "UserID":"1",
  "FirstName":"abc",
  "LastName":"xyz",
  "Email":"example@domain.com",
  "Username":"abc123",
  "Password":"badexample",
  "Deleted":"0",
  "DateCreated":"2017-08-13 13:06:44"
 }
]

我正在尝试在这个循环中针对<div id="updateDisplay">设置它的样式

$("#updateDisplay").empty();
$.ajax({
    type: "POST",
    url: "process.php",
    context: document.body,
    data:{userid: myjavascriptfile.user.userID},
    dataType: 'JSON',
    success: function(JSON){
        $.each(JSON,function(i,val)
        {
            $('#updateDisplay').append('<div class="col-md-4"><!--image column--><img alt="User Profile Image" src="images/userProfile.png" class="img-circle"></div>');
            $('#updateDisplay').append('<div class="col-md-2"><!--empty spacer--></div>');
            $('#updateDisplay').append('<div class="col-md-6"><!--user content div-->');
                $('#updateDisplay').append('<dl class="dl-horizontal">');
                $('#updateDisplay').append('<h3 class="profileHeading">BIO</h3>');
                $('#updateDisplay').append('<dt><strong>Username: </strong></dt>');
                $('#updateDisplay').append('<dd>'+ val.Username + '</dd>');
                ...etc (one for each returned item)
            $('#updateDisplay').append('</div>');

预期输出回报：

<div class="col-md-4"> <!--image column-->
    <img alt="User Profile Image" src="../images/userProfile.png" class="img-circle">
</div>
<div class="col-md-2"></div> <!--empty spacer-->
<div class="col-md-6"> <!--profile data column-->
    <dl class="dl-horizontal">
        <h3 class="profileHeading">BIO</h3>
        <dt>
            <strong>Username: </strong>
        </dt>
        <dd>
            abc123
        </dd>
...etc (one for each returned item)
</div>

当前回报：

<div class="col-md-6"><!--profile data column--></div>
<dt><strong>Username: </strong></dt>
<dd>abc123</dd>

如果我将 ENTIRE 追加放在一行代码上，它会正确显示，但在跨行展开时会中断。例如

$('#updateDisplay').append('<div class="col-md-6"><!--profile data column--><dl class="dl-horizontal"><h3 class="profileHeading">BIO</h3><dt><strong>Username: </strong></dt><dd>'+ val.Username + '</dd><dt>');

阅读和修改那些冗长的东西似乎很愚蠢。没有控制台错误。我使用预填充的虚拟数据在不使用 AJAX 帖子的情况下测试了 DIV 样式，并且能够获得所需的输出。

编辑

在@Dimash 评论之后解决了我了解如何处理多行字符串并且只有一个追加。 （还是很新的抱歉）

var profileData = "";
profileData = "<div class=\"col-md-4\"><img alt=\"User Profile Image\" src=\"images/userProfile.png\" class=\"img-circle\"></div>"
            + "<div class=\"col-md-2\"><!--empty spacer--></div>"
            + "<div class=\"col-md-6\"><!--profile data column-->"
            + "<dl class=\"dl-horizontal\">"
            + " <h3 class=\"profileHeading\">BIO</h3>"
            ...etc
            + "</div>";
            $('#updateDisplay').append(profileData);

也许下次有一个关于如何进行多行附加的示例的链接：How to display a json array in table format? [duplicate] 会更好地帮助像我这样的人理解你的意思 +=

感谢您对正确道路的指导！

Answer 1

您需要添加到正确的容器中。

  $('#updateDisplay .col-md-6').append('<dl class="dl-horizontal"></div>');
  $('#updateDisplay .col-md-6 .profileHeading').append('<h3 class="profileHeading">BIO</h3>');

这会起作用。

但我建议做一个字符串 html += 并且只追加一次。但无论如何，上面的方法都可以。

注意 Append 不是绘图，它一个接一个地附加 html 元素，事实上你没有关闭标签 - 没有帮助

在您的单行示例中，您没有关闭容器 div，这就是它中断的原因。 请多加注意。