So verwenden Sie AJAX und JSON in meinem Code

Ich habe eine Seite für die Auto-Website mit HTML, CSS, JavaScript, Jquery gemacht. Jetzt möchte ich es dynamisch machen. Da ich einen Button mit dem Namen DROPDOWN habe und ich möchte, dass wenn ich darauf klicke, er die neue Sammlung der Autos direkt von der Website der bestimmten Marke holt.So verwenden Sie AJAX und JSON in meinem Code

Ich habe ein Grundwissen über JSON, AJAX. Aber ich weiß nicht, wie genau ich es anwenden soll. Ich weiß, dass ich das JSON-Objekt in der JS-Datei speichern muss und dann diese JSON-Daten mit AJAX laden und dann meine Automodelle auffüllen werde. Aber wie Dinge stattfinden werden, ich habe Verwirrung darin.

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-Datei:

@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 Datei: https://jsfiddle.net/aw330go1/10/

-Code und Schnipsel unten

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 CODE

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

Quelle

2016-04-18 Anonymous

Es ist nicht sehr klar, was Sie hier erreichen wollen. Normalerweise würden Sie Jquery und AJAX verwenden, um Daten aus einer Datenbank abzurufen oder um Informationen oder Anforderungen an einen Dienst zu senden, der auf dem Webserver ausgeführt wird. Es ist mir nicht klar, wo die Liste der Autos, die Sie abrufen möchten, gespeichert ist. – Azmo

Ich möchte ein JSON-Objekt erstellen, das mehrere Arrays mit jeweils mehreren Daten enthält. In meinem Fall: Ein Objekt namens DROPDOWN, enthält mehrere Arrays jeweils für eine andere Marke von Auto. In jedem Array wäre das Modell des Autos. Ich habe keine API an meiner Seite und ich bin neu in JSON und AJAX. Wie schreibe ich den ganzen Code mit in JS? Danke –

Sie möchten von dem, auf die Funktion "myfunction", um Ajax-Aufruf nennen?

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

Und Sie müssen Ihre JSON-Datei auf Ihrer Website oder auf anderen Speichern speichern. "yourpath" - die URL, wo Sie Ihre JSON-Datei erhalten.

Aktualisieren Sie können Ihr JSON-Objekt in einer Datei mit Suffix von JSON (wie in der Abbildung unten) speichern. Und dann rufen Sie den Anwendungspfad mit dem Json-Objekt auf.

Quelle

2016-04-18 08:21:01

Das hast du mir die Syntax von AJAX erzählt. Jetzt nehme an, das ist mein JSON-Objekt. Hier erzähle ich das Auto modals mit der Anzahl der Türen. Was wäre jetzt mein nächster Schritt? Wie speichere ich es in meiner JS-Datei? Muss ich eine separate JS-Datei erstellen oder in derselben, die ich speichern kann. Und wie? Danke –

Das JSON-Objekt im obigen Code hinzugefügt. Kannst du es bitte sehen und mir helfen? Der obige Code ist nicht meins, aber ich möchte ein JSON-Objekt erstellen, aber nur mit Modellen. Könnten Sie bitte helfen.Vielen Dank –

Ich bin mir nicht sicher, was Sie versuchen, Sie möchten JSON-Objekt in var speichern? Warum musst du Ajax anrufen? –

So verwenden Sie AJAX und JSON in meinem Code

Antwort

Verwandte Themen