时间戳

首页 > 解决方案 > 如何将ajax获取请求数据显示到html？

javascript - 如何将ajax获取请求数据显示到html？

问题描述

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

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

标签： javascripthtmlajaxlaravel

解决方案

总而言之，目标是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>

推荐阅读