如何同时发送getJson请求和提交输入表单

Question

我正在尝试创建一个既显示 AJAX 响应又提交输入的输入表单。但是，由于提交会刷新页面，AJAX 响应会在表单提交后立即被删除。如何保留回复？

下面是我的代码。

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

<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

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

Reason for code not working:

1.check your json was not closing proberly.

2.And try with apply document.ready

3.From tag not Available in your Html page.I was added the form tag.

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

如何同时发送getJson请求和提交输入表单

How to send getJson request and submit input form at the same time

javascript

forms

ajax

jquery

getjson