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

代码无效的原因：


1.检查你的json没有正常关闭。

2.尝试申请document.ready

3.From标签在您的Html页面中不可用。我添加了表单标签。

$(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请求并提交输入表单

3 个答案: