提交表單到php而不重定向到新頁面

Question

我具有以下形式（使用了引導程序，並且是必需的）將數據發送到我的“ main.php”文件，並且它返回JSON編碼的數組。

<form class="form-horizontal" role="form" method="get" action="main.php">
    <div class="form-group">
        <label for="question" class="col-sm-2 control-label">Question:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="question" name="question" placeholder="Please ask me a question" value="">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-secondary">
        </div>
    </div>
</form>

數組以這種方式存儲和“回顯”：

<?php
$responsesArray = array(
            array(
                'template' => $template,
                'twitter' => $twitterOutput
                )
            );

        echo json_encode($responsesArray);
?>

我希望這不會將我重定向到“ main.php”，而是將結果提供給JQuery函數並顯示在我的原始頁面上。

這是我到目前為止的腳本，但是它不起作用，有人可以解釋為什么嗎？

<script type="text/javascript"> 
$("submit").submit(function(event)
{
    event.preventDefault();
    /* call the php that has the php array which is json_encoded */
    $.getJSON('main.php', function(data) 
    {
        /* data will hold the php array as a javascript object */ 
        $.each(data, function(index, value) 
        {
            $('ul').append('<li id="' + index + '">' + value.template + '\n' + value.twitter + ' ' + '</li>'); 
        });
    });
});

</script>

Answer 1

您應該將事件偵聽器綁定到表單，而不是提交按鈕

$("form").submit(function(event){/* ... */});

Answer 2

取而代之的submit()使用click()函數。 您的jQuery應該是這樣的：

$("#submit").click(function(event){
    event.preventDefault();
    /* call the php that has the php array which is json_encoded */
    $.getJSON('main.php', function(data) 
    {
        /* data will hold the php array as a javascript object */ 
        $.each(data, function(index, value) 
        {
            $('ul').append('<li id="' + index + '">' + value.template + '\n' + value.twitter + ' ' + '</li>'); 
        });
    });
});

更好的解決方案：

如果要動態行為，請使用on()而不是click() 。 click()綁定稱為“直接”綁定，它將僅將處理程序附加到已經存在的元素上。 它不會綁定到將來創建的元素。 為此，您必須使用on()創建一個“委托”綁定。

因此，您的jQuery應該像這樣：

$(document).on('click','#submit',function(event){
    event.preventDefault();
    /* call the php that has the php array which is json_encoded */
    $.getJSON('main.php', function(data) 
    {
        /* data will hold the php array as a javascript object */ 
        $.each(data, function(index, value) 
        {
            $('ul').append('<li id="' + index + '">' + value.template + '\n' + value.twitter + ' ' + '</li>'); 
        });
    });
});

從.on（）的文檔中 ：

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。

Answer 3

在表單提交事件或提交按鈕的單擊事件結束時返回false。

這是一個簡單的示例：

<form id='form' action='main.php'>
<input id='submit' type='submit' value='Submit'>
</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Disable using form submission event
    document.getElementById('form').onsubmit = function() {
        alert('Still here: submit');
        return false;
    };

    // Disable using submit button click event
    document.getElementById('submit').onclick = function() {
        alert('Still here: click');
        return false;
    };
});
</script>