Question

我有以下表格（使用bootstrap并且是必需的）将数据发送到我的＆＃34; main.php＆＃34;文件，它返回一个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>

数组被存储并回收＆＃39;这样：

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

        echo json_encode($responsesArray);
?>

我希望这不会将我重定向到＆＃34; main.php＆＃34;，而是将结果提供给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()绑定被称为＆＃34; direct＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用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>'); 
        });
    });
});

来自documentation of .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>

将表单提交给php而不重定向到新页面

3 个答案: