Question

下面是我的html和jquery代码，我希望在同一页面上的提交按钮上显示结果而不是下一页的结果。但它没有给我任何结果，并转到下一页。 HTML代码

dec1

jquery代码：

<form id="create" action="/engine_search/search/" method="get">
                            <input style="height:40px;" type="text" class="form-control" placeholder="Search" name="q">
                            <center>
                            <input style="float:left; margin-left:150px;" type="submit" class="btn btn-default" value="Search">
                                </center>
                         </form>

Answer 1

您应该使用event.preventDefault();

<script>
$(document).ready(function() {
$('#create').submit(function(event) { // catch the form's submit event
    event.preventDefault();
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
});
</script>

查找任何错误的控制台。它可能会有所帮助。

Answer 2

<input style="float:left; margin-left:150px;" type="submit" class="btn btn-default" value="Search" onclick="return SubmitFunction(this);">

Javascript：

function SubmitFunction(thisId){
 $.ajax({ // create an AJAX call...
    data: $(thisId).serialize(), // get the form data
    type: $(thisId).attr('method'), // GET or POST
    url: $(thisId).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#created').html(response); // update the DIV
    }
});

 return false; // cancel original event to prevent form submitting

}

使用jquery web显示来自同一页面上的另一个html的reesults

2 个答案: