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附加在一行代码上，它会正确显示但在跨行分布时会中断。 e.g。

$('#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 + =并只追加一次。但无论如何，以上都可行。

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

在你的一行示例中，您没有关闭容器div，这就是它破坏的原因。请更加细心。

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

1 个答案: