Как вывести 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);
  }
});

Я успешно получил данные и теперь хочу их отобразить. Я попытался упростить, добавив div с идентификатором title и затем динамически загружая данные ответа в div. Но эти данные не отображаются.

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

Моя цель - отобразить ответ данные внутри карты. Я отлично могу сделать это с помощью синтаксиса лезвия, но я просто хочу узнать больше о basi c 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 

Спасибо за помощь. Я много гуглил о том, как отображать запрос получения в ajax динамически, но все, что я видел, это почтовый запрос, и я уже это сделал.

Моя цель сейчас - получить данные и отобразить их динамически на мой взгляд. Спасибо за помощь.

Answer 1

Подводя итог, цель состоит в том, чтобы взять свойство 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 выполнит sh эту задачу:

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>

Answer 2

Поправьте меня, если я ошибаюсь, но я думаю, что ваш вопрос: «Я получил строку от вызова ajax, и теперь я хочу вставить эту строку в div, используя jQuery».

Если это ваш вопрос, значит, вы все делаете правильно.

Если вы хотите, чтобы ваш HTML отображался внутри этого тега <span>, вам просто нужно изменить свой jQuery селектор на: $('#title span').html(data.title);