Question

我是json和ajax的新手。我想请求有关如何使用AJAX检索JSON值的帮助。

这是我的json文件，名为list.js

{
     "loginid" : "Wafiqa",
     "password": "123"
}

这是我的html文件名为ajaxTest.html

<body>
     <p> Username: </p>
     <div id="uname"></div>
     <p> Password: </p>
     <div id="pword"></div>
</body>

我想要做的是json文件中用户名的值将显示在uname div，密码将显示在pword div。我怎么能这样做？

Answer 1

您无法访问本地文件。您将需要从服务器提供json文件。您可以从Web服务器运行代码。

您可以使用jquery#getJSON功能。

对于示例，在html head部分中有

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="images"></div>
 
<script>
(function() {
  $.getJSON( 'http://date.jsontest.com/', {
    format: "json"
  })
  .done(function( data ) {
     alert(data.date);
  });
})();
</script>
 
</body>
</html>

Answer 2

一旦您开始学习JavaScript，就可以更轻松地将JSON数据放入变量中。

var jsonData = {
  "loginid" : "Wafiqa",
  "password": "123"
};

然后将其插入DOM中，类似

document.getElementById(uname).innerHTML = jsonData.loginid;
document.getElementById(pword).innerHTML = jsonData.password;

如果你想在另一个文件中使用json，你应该将它作为静态资源提供，或者使用一些服务器端代码来渲染它。

使用AJAX从JSON检索值

2 个答案: