如何显示Ajax获取到html的请求数据？

Question

$.ajax({
  type: 'get',
  url: '/get/posts',
  dataType: 'json',
  success: function (data) {
    console.log(data);
    $('#title').html(data.title);
  },
  error: function (xhr, status, error) {
    console.log(xhr, error);
  }
});

我成功获取了数据，现在我想显示它。我试图通过添加一个ID为“ title”的div来简化操作，然后将响应数据动态加载到div中。但是该数据未显示。

<div id = "title">
    <span ></span>
</div>

我的目标是在卡内显示响应数据。我可以使用刀片语法完美地做到这一点，但我只想学习更多有关基本javascript的知识，因此，当我开始使用框架时，会减少一些麻烦。

这是我获取数据的方式：

public function get_ajax_post(){
        $posts = Post::all();
        return json_encode($posts);
}

这里是console.log

1: {…}
​​
category: "python"
​​
content: "<p>asd asd asd</p>"
​​
created_at: "2020-05-26T16:43:34.000000Z"
​​
featured_image: "null"
​​
id: 2
​​
slug: "asdas-dasd"
​​
title: "asdas dasd"
​​
updated_at: "2020-05-26T16:43:34.000000Z"

....... and so on 

感谢您的帮助。我在Google上搜索了很多有关如何在Ajax中动态显示get请求的信息，但是我看到的只是发布请求，而我已经做到了。

我现在的目标是获取数据并将其动态显示在视图上。谢谢您的帮助。

Answer 1

如果我错了，请更正我，但我认为您的问题是，“我从ajax调用中得到了一个字符串，现在我想使用jQuery将其插入到div中。”

如果这是您的问题，那么您做对了。

但是，如果您希望HTML显示在<span>标记内，则只需将jQuery选择器更改为：$('#title span').html(data.title);

Answer 2

总而言之，目标是从响应数据中获取title属性：

const data = {
  category: "python",
  content: "<p>asd asd asd</p>",
  created_at: "2020-05-26T16:43:34.000000Z",
  featured_image: "null",
  id: 2,
  slug: "asdas-dasd",
  title: "asdas dasd",
  updated_at: "2020-05-26T16:43:34.000000Z"
}

并显示在此span标签内：

<div id = "title">
    <span></span>
</div>

此原始JavaScript将完成该任务：

const div = document.getElementById('title');
const span = div.firstElementChild;
span.innerHTML = data.title;

const data = {
  category: "python",
  content: "<p>asd asd asd</p>",
  created_at: "2020-05-26T16:43:34.000000Z",
  featured_image: "null",
  id: 2,
  slug: "asdas-dasd",
  title: "asdas dasd",
  updated_at: "2020-05-26T16:43:34.000000Z"
}

const addTitle = () => {
  const div = document.getElementById('title');
  const span = div.firstElementChild;
  span.innerHTML = data.title;
}

#title {
  outline: 1px solid red;
  padding: 0.5rem;
}

span {
  outline: 1px solid #aaa;
  padding: 0.2rem;
}

<button onclick="addTitle()">Add Title</button>
<div id="title">
  <span></span>
</div>