Question

我使用HTML，CSS，JavaScript，Jquery为汽车网站制作了一个页面。现在我想让它充满活力。因为我有一个名为DROPDOWN的按钮，当我点击它时我想要它，它直接从特定品牌的网站上获取新的汽车集合。

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

下面给出的代码和代码段：

HTML CODE

<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);
    }
}

Answer 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文件的网址。

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

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

1 个答案: