Javascript 如何将AJAX数组解析为特定的HTML div类？

我目前有一个工作的AJAX请求，它向我的PHP文件发送一个请求，并将结果回显到HTML。我能够创建一个显示数据数组的警报。如何解析数据并将每个数据专门插入到div类中？我知道您可能会想“只使用表或列表”我的实际代码更结构化，数据必须插入到特定的div中。

脚本

    $(function(){
        $(".task-listing").click(function() {
        $.ajax({
            type: 'POST',
            url: 'php/task-info-get.php',
            dataType: 'json',
            data: 'pid=' + $(this).attr("id"),
            success: function (response) {
                 alert(response);
            }
        })
    });
    });

HTML div我想要数据

<div class="data">
  <div class="task_date"></div>
  <div class="title"></div>
  <div class="description"></div>
  <div class="location"></div>
  <div class="startdate"></div>
  <div class="tasktime"></div>
  <div class="price"></div>
</div>

PHP

<?php
include 'sqlconnection.php';
$conn = OpenCon();

$stmt = $conn->prepare('SELECT task_date,title,description,location,price,startdate,tasktime FROM tasks WHERE pid='.$_POST['pid']);
$stmt->execute();
$stmt->bind_result($task_date,$title,$description,$location,$price,$startdate,$tasktime);
while($stmt->fetch()) {
    $output[]=array($task_date,$title,$description,$location,$price,$startdate,$tasktime);
}
$json=json_encode($output);

echo $json;
$stmt->close();
CloseCon($conn);
?>

---

如果响应始终是一个包含足够多内容（长度=7）的数组&为了在div.data标记中作为child，您可以使用Jquery执行此操作：

const responses = [1, 2, 3, 4, 5, 6, 7];
$('.data').children().each((index, child) => {
    $(child).text(responses[index])
});

例如：

对于更复杂的html结构，请使用直接选择器设置其内容：

$('.data .task_date').text(response[0]);
$('.data .title').text(response[1]);
$('.data .description').text(response[2]);
$('.data .location').text(response[3]);
$('.data .startdate').text(response[4]);
$('.data .tasktime').text(response[5]);
$('.data .price').text(response[6]);

我建议使用@Nick的答案，从PHP后端到客户端，每个字段都有准确的键名。

您可以这样使用

  $(function(){
        $(".task-listing").click(function() {
            $.ajax({
                type: 'POST',
                url: 'php/task-info-get.php',
                dataType: 'json',
                data: 'pid=' + $(this).attr("id"),
                success: function (response) {
                    var jsonres=JSON.parse(result);
                    htmlconts='';
                    for (i in jsonres) {
                        htmlconts+='<div class="data">\
                            <div class="task_date">'+jsonres[i][0]+'</div>\
                            <div class="title">'+jsonres[i][1]+'</div>\
                            <div class="description">'+jsonres[i][2]+'</div>\
                            <div class="location">'+jsonres[i][3]+'</div>\
                            <div class="startdate">'+jsonres[i][4]+'</div>\
                            <div class="tasktime">'+jsonres[i][5]+'</div>\
                            <div class="price">'+jsonres[i][6]+'</div>\
                        </div>';
                    }
                    $("body").append(htmlconts);
                }
            });
        });
    }); 

$（函数（）{
$（“.task list”）。单击（函数（）{
$.ajax({
键入：“POST”，
url:'php/task info get.php'，
数据类型：“json”，
数据：“pid=”+$（this.attr（“id”），
成功：功能（响应）{
var jsonres=JSON.parse（结果）；
htmlconts=''；
对于（我在jsonres中）{
htmlconts+='\
“+jsonres[i][0]+”\
“+jsonres[i][1]+”\
“+jsonres[i][2]+”\
“+jsonres[i][3]+”\
“+jsonres[i][4]+”\
“+jsonres[i][5]+”\
“+jsonres[i][6]+”\
';
}
$（“正文”）。追加（htmlconts）；
}
});
});
}); 

---

我已经在

body

标签中添加了最终内容。您可以使用

class='data'

的父级，我会修改您的PHP以返回一个关联数组，其中键是您希望数据进入的相关

div

的类：

while($stmt->fetch()) {
    $output[]=array(
        'task_date' => $task_date,
        'title' => $title,
        'description' => $description,
        'location' => $location,
        'price' => $price,
        'startdate' => $startdate,
        'tasktime' => $tasktime
    );
}

然后，在JS中，您只需使用响应的键来填充div：

success: function (response) {
    Object.keys(response[0]).map(k => $('.' + k).text(response[0][k]));
}

下面是一个演示代码的片段（使用普通函数而不是箭头函数）：

let响应=[{
任务日期：“2020-02-26 17:56:15”，
标题：“中交”，
说明：“中交”，
位置：“远程”，
价格:44，
起始日期：“2020-02-14”，
任务时间：“00:03:33”
}]
Object.key（响应[0]）.map（函数（k）{
$（'.+k）.text（答复[0][k]）；
});
如果可能，请分享您的回答好吗

它是一个单一的物体吗

如果是单个对象，那么根据数组的索引假设并迭代循环以获取特定的键值是不好的。任务日期在数组中的2个位置

首先解析ajax响应，例如var jsonres=JSON.parse（result）；
通过jquery选择器$（“.task_date”）.html（数据）附加您的值
 你只返回一行数据吗？每次点击列表，是的，没有办法。。。document.getElementByClassName（“title”）.innerHTML=//something//数组中的每个项？是的，绝对可以。你不想使用jQuery或其他什么吗？不，我想能够将它们专门添加到我想要的div中。我真正的html要复杂得多，在div中有很多div用于结构和样式。我只是这么简单，这样我就可以把它应用到我的真实代码中，然后你必须在响应数组中结构化数据，你能发布一个响应示例吗？2020-02-27 23:55:10，帮帮我，我需要有人帮我（描述），本地，252020-02-27,00:12:30如果我在其他div中有div，它将不起作用。如果可能的话，我希望避免附加整个块，因为它的结构要比这个复杂得多。有没有可能。。。document.getElementByClassName（“title”）.innerHTML=//something//something//document.getElementsByClassName（“title”）[0]。innerText=+jsonres[i][1]当我将我准备好的语句更改为您建议的语句时，警报只显示[object object]，没有数据数组。因为它现在是js中的对象，您可以使用它访问确切的键。好的，我正在尝试理解lol。我对js、ajax和PHP真的很陌生。我必须用“k”代替div或key吗？我是否将我的类名放在“.”中？如果你能展示一个如何在数组中创建一个对象的例子，那将是非常棒的，谢谢@BrettMalone您可以在.ajax
success
函数中直接使用该代码。看我的edit@BrettMalone它将使用现在返回的对象中的键（代替数组）来选择要由其类（
$（'.+k）
）填充的
div
），并使用对象中的值（
response[k]
）来填充
div
。