2017-10-07 2 views
0

Ich versuche, die Elemente aus der Datenbank abrufen und in einer Liste dynamisch anzeigen. Aber jedes Mal, wenn ich das Objekt zurückbekam, blitzte der Gegenstand nur kurz auf und verschwand. Ich bin sicher, der Server funktioniert gut und zurückgegeben JSON-Objekt ist korrekt formatiert.jQuery Objekt kann nicht auf der Seite ständig angezeigt werden

let amount = 0; 
 
     $(document).ready(function() { 
 
      $("#addItem").click(() => { 
 
       let productID = $("input[name='productID']").val(); 
 
       let count = $("input[name='IDQty']").val().toString(); 
 

 
       console.log(productID, count); 
 

 
       let query = '?'; 
 
       if (productID) { 
 
        query += 'productID=' + productID + "&"; 
 
       } 
 
       if (count) { 
 
        query += 'IDQty=' + count; 
 
       } 
 

 
       let url = "http://localhost:3000/api/" + query; 
 

 
       $.getJSON(url, (result) => { 
 
        console.log(result); 
 
        $("ul").append("<li>" + result.name + " " + result.price.toString() + " " + result.count + "</li>");    
 
       }); 
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
     <form> 
 
      ID: <input name="productID"> 
 
      Qty: <input name="IDQty" type="number" style="width:60px" value="1" min="1"> 
 
      
 
      <input type="submit" value="Add" id="addItem"> 
 
     </form>  
 
<ul id="receiptContent"></ul>

Das Ergebnis zeigte, in der Konsole ist richtig und das Element Zeigte im Browser für eine Sekunde. Ich denke, es ist ein Redirect-Problem, oder die Art, wie ich URL an .getJSON übergeben, ist nicht richtig. Irgendein Hinweis? Danke vielmals.

+2

Ja, Sie reichen das Formular ein. Go ** return false; ** innerhalb des Click-Ereignisses oder beim Formularsende-Ereignis. Also, nach dem '$ .getJSON()' oder tun Sie $ ('form'). On ('submit', function (e) {e.preventDefault();}) ' – skobaljic

+0

Vielen Dank, das weiß ich nie Formular absenden gibt auch etwas zurück, außer Antwortdaten. –

+0

In Ihrem Fall lädt es nur die Seite neu. Sie brauchen das '' Element überhaupt nicht (als Sie auch kein zusätzliches Skript benötigen). – skobaljic

Antwort

0

Ändern Sie den Formular-Tag zu

<form onsubmit="javascript:return false"> 

Oder die Schaltfläche Tag ändern Attribut "type" Wert von "submit" bis "button"

0

Ändern Form Aktion javascript: void (0) tun die Arbeit

<form action="JavaScript: void(0)"> 

Oder

<form action="#"> 
Verwandte Themen