追加方法使用 from in a Jquery $getJSON

append method using the from inside an Jquery $getJSON

本文关键字：Jquery getJSON in from 方法 追加      更新时间：2023-09-26

好的，所以我有 3 个文件，首先是一个 JSON 文件，它告诉我我需要的所有信息，一个 Html 文件，它给了我一个框架，可以把所有的 JavaScript 放在哪里一个javascript文件，它将挂接JSON中的信息并放入html中。

所以我的HTML是这样的：

<div class="hello">
  <h2>Name</h2>
</div>

我的JSON是这个，根到数据/生物.json：

{
 "name" :  "Olivia Palito",
 "age" : "23"
}

我的Javascript是这样的：

var mockup = '<div class="work"></div>';
var mockup02 = '<div>%data%</div>';
var $addItem01 = $(".hello");
var $addItem02 = $(".work");
var jsonRoot = 'data/bio.json';
$.getJSON(jsonRoot, function(data){
   var addMe = mockup.replace('%data%', data.name);
   $addItem01.append(mockup);
   $addItem02.append(addMe);
});

现在的问题是，当我在浏览器上运行它时，我可以添加第一个模型，它会添加<div class="work"></div>但是当我尝试添加addMe时，它没有显示任何内容。我在这里错过了什么？如果我把控制台.log（数据）;它会显示一些东西，这意味着我正在接收文件，但它只是没有添加到 html 中，因为我也可以添加静态文本，而不是使用 replace 方法，并且不会添加内容。

var mockup02 = mockup.replace(%data%, data.name);

它不起作用，因为这不是有效的JavaScript。

打开控制台，您应该会看到错误

未捕获的语法错误：意外的标记百分比

您需要将其设置为正则表达式

var mockup02 = mockup.replace(/%data%/, data.name);

或字符串

var mockup02 = mockup.replace("%data%", data.name);

它失败的第二个原因是您在将元素添加到页面之前选择了具有类work的元素。它不会神奇地找到元素。

将其切换到，它将添加它。 

$(".work").append(addMe);
相关文章：