如何发送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

原因代码不工作：

1，检查您的JSON是不关闭proberly。

2.And尝试申请document.ready

3.从标签不可用在你的HTML page.I加入表单标签。

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