如何将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 的 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 中动态显示获取请求的信息，但我看到的只是发布请求，而且我已经这样做了。

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

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>

这个 vanilla 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>