使用jQuery Web在同一頁面上顯示來自另一個HTML的結果

Question

下面是我的html和jquery代碼，我想在同一頁面上的提交按鈕上顯示結果，而不是在下一頁上。 但這並沒有返回任何結果，請轉到下一頁。 HTML代碼

<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>

jQuery代碼：

<script>
$(document).ready(function() {
$('#create').submit(function() { // catch the form's submit event
    $.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 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

}