getJsonをリクエストして入力フォームを同時に送信する方法

Question

入力フォームを作成しようとしていますが、AJAX応答と入力の両方を表示します。ただし、submitがページをリフレッシュするので、フォームが送信された直後にAJAXレスポンスは削除されます。どのように応答を保持するのですか？

以下は私のコードです。コードのために働いていない

    $('#inputButton').click(function() { 
 
         var URL = 'URLEXAMPLE'; 
 
\t \t \t \t   $.getJSON(URL, function(data){ 
 
\t \t \t \t    
 
\t \t \t \t    for (var i = 0; i < data.length; i++){ 
 
\t \t \t \t     var info = data[i].content; 
 
           $("#jsonInfo").append(info); 
 
          }; 
 
\t \t \t \t  }); 
 
\t \t \t \t  
 
      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="inputButton" type="submit" value="Done"> 
 
       <div id="jsonInfo"></div>

Answer 1

理由：

あなたのJSONがproberly閉じていませんでした1.check。あなたのHTMLのpage.Iでは利用できないdocument.ready

3.Fromタグを適用して

2.And試みは、formタグを追加しました。

$(document).ready(function(){ 
 
       $('#inputButton').click(function (e) { 
 
        var URL = 'URLEXAMPLE'; 
 
        $.getJSON(URL, function(data){ 
 

 
         for (var i = 0; i < data.length; i++){ 
 
          var info = data[i].content; 
 
          $("#jsonInfo").append(info); 
 
         }; 
 
         }) 
 
        console.log('Its work') 
 
        e.preventDefault(); 
 
       }); 
 
}); 
 
      </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
<input id="inputButton" type="submit" value="Done"> 
 
      <div id="jsonInfo"></div> 
 
    </form>

Answer 2

$('#inputButton').click(function (e) { 

    e.preventDefault(); // prevent default behavior i.e. refresh page 

    var URL = 'URLEXAMPLE'; 
    $.getJSON(URL, function(data){ 

    for (var i = 0; i < data.length; i++){ 
     var info = data[i].content; 
     $("#jsonInfo").append(info); 
    }; 
}); 

Answer 3

$("form").submit(function(ev){ //need slector to be form. 
     ev.preventDefault(); // prevent default submit behavior 
    }); 

または

$('#inputButton').click(function() { 
    $(this).parents('form').submit(function(e){ 
        e.preventDefault(); 
        var URL = 'URLEXAMPLE'; 
        $.getJSON(URL, function(data){ 

         for (var i = 0; i < data.length; i++){ 
          var info = data[i].content; 
          $("#jsonInfo").append(info); 
         }; 
       }); 
     });