防止在php表单提交上刷新页面？答案

【问题标题】：prevent page refresh on php form submit?防止在php表单提交上刷新页面？
【发布时间】：2012-09-14 05:46:13
【问题描述】：

我有一个页面 (http://qccr.dyndns.org:82/on-air-schedule)，访问者可以在其中单击一周中的某一天并显示我们的广播电台当天的时间表。唯一的问题是发生这种情况时页面会完全刷新；如果只更改页面中心的时间表，而不是整个页面，那就更好了。我对javascript不太了解...有没有简单的方法可以做到这一点？

相关的代码在这里（我认为）：

    <?php



    <div class="date-input-form">
        <form action="" method="post" id="ddateform" >
            <input type="hidden" name="ddate" id="ddate" size="11" maxlength="10" value="" />
            <?php echo JHTML::_( 'form.token' ); ?>
        </form>
    </div>


    <div id="navcontainer">

    <ul id="navlist">
    <?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>'; document.getElementById('ddateform').submit();">Monday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Tuesday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('tuesday')); ?>'; document.getElementById('ddateform').submit();">Tuesday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Wednesday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('wednesday')); ?>'; document.getElementById('ddateform').submit();">Wednesday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Thursday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('thursday')); ?>'; document.getElementById('ddateform').submit();">Thursday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Friday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('friday')); ?>'; document.getElementById('ddateform').submit();">Friday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Saturday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('saturday')); ?>'; document.getElementById('ddateform').submit();">Saturday</a></li>
    <?php endif; ?>

    <?php if($currentday=="Sunday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('sunday')); ?>'; document.getElementById('ddateform').submit();">Sunday</a></li>
    <?php endif; ?>

    </ul>
</div>

【问题讨论】：

标签： php javascript forms refresh submit

【解决方案1】：

在您调用的任何 javascript 函数中，执行 return false; 以防止默认行为。

<a onclick="dothis(); return false;" href="#">Click Me</a>

-或-

<a onclick="dothis();" href="#">Click Me</a>
<script type="text/javascript">
  function dothis() { /* stuff here */ return false; }
</script>

学习一些javascript基础知识，你会得到很好的服务:)

【讨论】：

您可以使用多种方法中的一种来执行此操作 - 您可以在 form 标记上使用 onsubmit 属性，或者在 input 标记上使用 onclick 或类似的效果.
所以，而不是例如：
星期一
星期一

嗯，你正在做的是非常规和倒退。如果您提交的表单是主页的一部分，它将提交整个页面

【解决方案2】：

我对 PHP 知之甚少，所以对此持保留态度。

默认情况下，HTML 表单在提交时不会刷新页面。某些东西（我猜是 PHP）导致生成 HTML 表单，导致表单提交时页面刷新。

我不确定 Barry 的回答是否有效，但如果您想尝试一下，请将 Monday li 的代码替换为：

使用您的格式

<?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick="document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>'; document.getElementById('ddateform').submit(); return false;">Monday</a></li>
<?php endif; ?>

格式合理

<script type="text/javascript">
    function onMondayClick(event) {
        document.getElementById('ddate').value = '<?php echo date('Y-m-d', strtotime('monday')); ?>';
        document.getElementById('ddateform').submit();
        return false;
    }
</script>

<?php if($currentday=="Monday") : ; ?>
    <li class="currentday"><?php echo $currentday; ?></li>
    <?php else : ?>
    <li><a href="#" onclick=onMondayClick>Monday</a></li>
<?php endif; ?>

【讨论】：

注意添加行return false；到回调函数的末尾相当于调用 event.preventDefault() 和 event.stopPropagation() 方法，其中 event 是自动传递给回调函数的第一个参数。
那么你应该弄清楚为什么你的 html 表单是使用提交时自动刷新页面的非默认选项生成的。完成后，您可以使用 PHP 或 Javascript ajax 调用从您的服务器获取数据，然后使用 Javascript 修改您的页面以反映新数据。