Wie getJson Anfrage zu senden und Eingabeformular zur gleichen Zeit

Question

Ich versuche, ein Eingabeformular erstellen, die sowohl AJAX-Antwort anzeigt und Eingabe einreicht. Da "submit" die Seite jedoch aktualisiert, wird die AJAX-Antwort unmittelbar nach dem Senden des Formulars entfernt. Wie behalte ich die Antwort?

Unten ist mein Code.

    $('#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

Grund für die Code nicht funktioniert:

1.check Ihre json nicht proberly Schließung wurde.

2.Und Versuch mit anwenden document.ready

3.From Tag nicht verfügbar in Ihrem Html page.I wurde das Formular-Tag hinzugefügt.

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

oder

$('#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); 
         }; 
       }); 
     });