2017-10-07 16 views
0

私はデータベースからアイテムを取得してリストに動的に表示しようとしています。しかし、私がオブジェクトを戻すたびに、アイテムが点滅して消えてしまっただけです。私は、サーバーが正常に動作し、返されたJSONオブジェクトが正しくフォーマットされていると確信しています。jQueryオブジェクトは常にページに表示されません

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>

結果をコンソールに示した右であり、アイテムは第二のために、ブラウザで表示しました。私はそれがリダイレクトの問題だと思う、または私がURLを渡す方法.getJSONは正しくありません。何かヒント?どうもありがとう。

<form onsubmit="javascript:return false"> 

やボタンタグを変更するには、ボイド(0)の作業を行います

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

それとも

<form action="#"> 
+2

はい、フォームを送信します。 Go ** ** false false; **クリックイベント内、またはフォーム送信イベント中。 – skobaljic

+0

ありがとう、私はそれを知りませんでした。(それは、送信フォームも応答データ以外の何かを返す。 –

+0

あなたの場合は、ページをリロードするだけです。 '

'要素はまったく必要ありません(追加のスクリプトも必要ありません)。 – skobaljic

答えて

0

変更formタグを:JavaScriptにフォームのアクションに変更

0

属性 "type"の値を "submit"から "button"に変更

関連する問題