个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:02:11 27 4
gpt4 key购买 nike

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

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

代码和片段如下:

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

最佳答案

您想调用函数“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 对象调用你的应用程序路径。 enter image description here

关于javascript - 如何在我的代码中使用 AJAX 和 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36687987/

27 4 0
文章推荐： css - 在wordpress中隐藏特定类别标题
文章推荐： ios - UIBarButtonItem 在 < iOS 11 上的位置不正确
文章推荐： ios - 如何在 1 天后快速重置特定变量值
文章推荐： arrays - 如何从 NSManagedObjects 数组中的每个日期中选择一个具有最高值的对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com