如何在我的代码中使用 AJAX 和 JSON答案

【问题标题】：How to use AJAX and JSON in my code如何在我的代码中使用 AJAX 和 JSON
【发布时间】：2016-04-18 07:38:44
【问题描述】：

我使用 HTML、CSS、JavaScript、Jquery 为汽车网站制作了一个页面。现在我想让它动态化。因为我有一个名为 DROPDOWN 的按钮，我希望当我点击它时，它会直接从特定品牌的网站获取新的汽车集合。

我对 JSON、AJAX 有基本的了解。但我不知道如何确切地应用它。我知道我必须将 JSON 对象存储在 JS 文件中，然后使用 AJAX 加载该 JSON 数据，然后填充我的汽车模型。但是事情将如何发生，我对此感到困惑。 https://jsfiddle.net/aw330go1/10/

下面给出的代码和sn-p：

HTML 代码

<html>
<head>
<title> SpaceCar </title>
<link rel="stylesheet" type="text/css" href="styles/global.css"/> 
<meta name="viewport" content="width=device-width, initial-scale:1.0, user-scalable=0" />
<script src="scripts/jquery-1.12.3.min.js"></script>
<script src="srcipts/general.js"></script>
</head>

<body>
<div id="header"> 
    <div class="logo"> <a href="#">Space<span>Run</span></a></div>
</div> 
<a class="mobile">MENU</a>
    <div id="container">
    <div class="sidebar">
        <ul id="nav">
        <li><a class="selected" href="#">Dashboard</a></li>
        <li><a href="#">Maruti</a></li>
        <li><a href="#">Hyundai</a></li>
        <li><a href="#">RangeRover</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">Purchases</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
        <div class="dropdown-content" id="myDropdown">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
     </li>
     </ul>
        <!--<button onclick="addimage();"> Click</button>-->
    </div>
    <div class="content">
    <h1>Dashboard</h1>
    <p> alright this is your dashboard</p>
        <div id="box">
        <div class="box-top">News</div>
        <div class="box-panel">
        this is some simple news ikdnksnd
        </div>
        </div>
    <div id="box">
        <div class="box-top">News</div>
        <div class="box-panel">
        what is idshfknsdkjfnjsdnkfnsdn
        </div>
    </div>
    <div id="box">
        <div class="box-top">News</div>
        <div class="box-panel">
        o i really khdkasndksnk is o asdjbaskjbdkasbdmaskdbas 
        </div>
    </div>
        <div id="center">
            <img src="images (1).jpg" style="width:150px;height:150px" id="One"/>
            <img src="fisker-karma.jpg" style="width:189px;height:170px" id="Two"/>
            <img src="images.jpg" style="width:150px;height:150px" id="Three"/>
            <img src="aaaaaaaaaaaaaaaa.jpg" style="width:150px;height:150px" id="Four"/>
        </div>
</div>
</body>
</html>

CSS 文件：

@import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}   
body {
    font-family: 'Open Sans';
    background-image: url("/home/kamna/admin page/bubble_f2.jpg");
} 
a {
    text-decoration: none;
}
div#header {
    width: 500%;
    height: 50px;

    margin: 0 auto;
}
.logo {
    margin-top: 50px;
    margin;left:15px;
    margin: 0 auto;
}
.logo a {
    font-size: 1.6em;
    color: #000;
}
.logo a span {
    font-weight: 300;
}
div#container {
    width:100%;
    margin: 0 auto;
}
.sidebar {
    width: 250px;
    height: 100%;
    background-color: #171717;
    float: left;
    color:#fff; /* change to whatever you want */
}
.content {
    width: auto;
    margin-left:250px;
    height: 500px;
    backgroud-color: #008000;
    color: #000;
    padding: 15px;
}
.content p {
    width:auto;
    font-size :0.73em;    
}
div#box {
    margin-top:15px;
    display: inline-block;
}
div#box .box-top {
    color:#fff;
    text-shadow:0px 0px 1px #000;
    background-color: #2980b9;
    padding:5px;
    padding-left:15px;
    font-weight: 300;
}
div#box .box-panel {
padding:15px;
background-color: #fff;
color:#333;
}
ul#nav {
}
ul#nav li {
    list-style: none;

}
ul#nav li a {
    color: #ccc;
    display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
  -webkit-transition: 0.2s;
  -moz-transition:0.2s;
  -o-transition:0.2;
  transition:0.2s;
}
ul#nav li a:hover {
    background-color: #030303;
    color: #fff;
    padding-left:30px;
}
ul#nav li a.selected{
    background-color: #030303;
    color:#fff;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
#center {
  margin:0px auto;
  width:960px; 
  height:auto;
  border:5px solid black;
  padding:10px;
 }
 #One {
     margin-right: 0px;

 }
#Two {
  margin-left: 20px;
  border:1px solid blue;
}
#Three {
  margin-left: 20px;
  border:1px solid blue;
}
#Four{
  margin-left: 20px;
  border:1px solid blue;
}
a.mobile{
    display block;
    color:#fff;
    background-color:#000;
    text-align: center;
    padding:7px;
    border-bottom:1px #fff;
}
a.mobile: active{
    background-color:#4a4a4a;
}

JS 文件：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

/* RELEVANT CODE */

$("a.mobile").click(function(){
  $(".sidebar").slideToggle('fast');
});

$("li.dropdown").click(function(){
  $(this).find('.dropdown-content').slideToggle('fast');
});

/* END OF RELEVANT CODE */

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }

JSON 代码

  {
    "cars": {
        "Nissan": {
            "Sentra": {"doors":4, "transmission":"automatic"},
            "Maxima": {"doors":4, "transmission":"automatic"}
        },
        "Ford": {
            "Taurus": {"doors":4, "transmission":"automatic"},
            "Escort": {"doors":4, "transmission":"automatic"}
        }
    }
}

data.cars['Nissan']['Sentra'].doors   // 4
data.cars['Nissan']['Maxima'].doors   // 4
data.cars['Nissan']['Maxima'].transmission   // automatic

for (var make in data.cars) {
    for (var model in data.cars[make]) {
        var doors = data.cars[make][model].doors;
        alert(make + ', ' + model + ', ' + doors);
    }
}

【问题讨论】：

您在这里要完成的工作不是很清楚。通常，您会使用 Jquery 和 AJAX 从数据库中检索数据，或将一些信息或请求发送到在网络服务器上运行的服务。我不清楚您要检索的汽车列表存储在哪里。
我想创建一个 JSON 对象，其中包含多个数组，每个数组都有几条数据。在我的例子中：一个名为 DROPDOWN 的对象，包含多个数组，每个数组用于不同的汽车品牌。在每个数组中都是汽车的模型。我身边没有 API，而且我是 JSON 和 AJAX 的新手。如何用 JS 编写整个代码。谢谢

标签： javascript jquery css json ajax

【解决方案1】：

你想在函数“myfunction”上调用get的ajax调用吗？

function myFunction() {
 $.ajax({
            type: "GET",
            url: "http://localhost:58108/bower_components/angular-mocks/bower.json",
            dataType: "json",
            async: false,
            success: function (result) {
            //the data you want will be in result
              },
            error: function (err) {
                //  console.log("text loading error");
            }
        });
}

而且您必须将 json 文件存储在您的站点或其他存储中。 "yourpath" - 获取 json 文件的 url。

更新您可以将 json 对象存储在后缀为 json 的文件中（如下图所示）。然后用 json 对象调用你的应用程序路径。

【讨论】：

这是你告诉我的 AJAX 的语法。现在假设这是我的 JSON 对象。在这里，我用门的数量告诉汽车模态。现在我的下一步是什么。我如何将它存储在我的 JS 文件中？我需要制作一个单独的 JS 文件还是在我可以存储的同一个文件中。如何？谢谢
在上面的代码中添加了 JSON 对象。请你看看并帮助我。上面的代码不是我的，但我想制作一个 JSON 对象，但只是使用模型。你能帮忙吗。谢谢
我不确定你想得到什么，你想将 json 对象存储在 var 中吗？那么为什么需要调用 ajax？
我已经创建了一个 JSON 对象 .. 很明显，我会将它存储在一个 var 中，然后我想进行 ajax 调用，以便在单击按钮后所有车型都是新的模型可以被取出或者更详细的可以动态显示特定汽车的细节。你现在收到我的问题了吗？
我将在这里解释整个场景。我已经为汽车制作了一个网页，其中我有不同的选择，其中我有一个带有 DROPDOWN 的选项。每当任何用户单击它时，都会打开一个下拉列表。会有很多选项，其中有一个名为查看新模型。当用户点击它时，他/她将看到特定汽车的新型号及其详细信息。因此，对于这一切，我需要我制作并在这里展示的 Json 对象。但是现在如何进行 ajax 调用..以及如何在代码中添加它。这是我的主要问题。谢谢