更改表单以使用 jQuery 并避免页面刷新答案

【问题标题】：Change a form in order to use jQuery and avoid the page refresh更改表单以使用 jQuery 并避免页面刷新
【发布时间】：2012-10-03 19:52:29
【问题描述】：

我正在尝试更改下面的表单标签以使用 jQuery。已经，单击按钮将显示从行更改为列，反之亦然，但我想避免页面刷新。我真的是 jQuery 的新手，当我尝试自己更改它时，我无法诚实地说出我的错误。

<form id="rowsToColumns" action="index.php?main_page=specials&disp_order=1" method="POST">
    <input type="hidden" name="style_changer" value="columns"/>
    <button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>

<form id="columnsToRows" action="index.php?main_page=specials&disp_order=1" method="POST">
    <input type="hidden" name="style_changer" value="rows"/>
    <button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>

我也在尝试让按钮在单击时调用不同的样式表。正如我上面提到的，显示从/到行/列的更改不需要此样式表。实际页面使用php编写如下图：

<?php $this_page =  zen_href_link($_GET['main_page'], zen_get_all_get_params()); ?>
<div id="style_changer">
    <?php if($current_listing_style == 'rows') {?>
    <form id="rowsToColumns" action="<?php echo $this_page;?>" method="POST">
        <input type="hidden" name="style_changer" value="columns"/>
        <button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
    </form>
    <?php } else { ?>
    <form id="columnsToRows" action="<?php echo $this_page;?>" method="POST">
        <input type="hidden" name="style_changer" value="rows"/>
        <button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
    </form>
    <?php } ?>
</div>

【问题讨论】：

标签： php jquery css forms

【解决方案1】：

如果问题是“如何更改表单以使用 jQuery 并避免页面刷新”，那么 jquery form plugin 是您的朋友，因为它可以将任何 html 表单转换为 ajax 驱动的表单。

只需按照他们的说明进行操作，您很快就会开始工作（前提是您的表单已经按原样工作）。

【讨论】：

【解决方案2】：

您可以通过阻止提交按钮上的默认操作来阻止默认表单提交..

 $('button[type=submit]').submit( function(e){

       e.preventDefault(); // Stops the form from submitting 
  });

【讨论】：

您最好将提交事件附加到表单中。我相信 IE 中的按钮类型存在一些问题。（虽然不是 100% 确定）

【解决方案3】：

好吧，对于一个非常模糊的方法，您可以使用$.ajax 并利用读取<form> 的预先存在的属性来决定提交方法并将元素的值作为提交数据读取：

$('form').on('submit',function(e){
  var $form = $(this);
  // submit the form, but use the AJAX equiv. instead of a full page refresh
  $.ajax({
    'url'     : $form.attr('action'),
    'method'  : $form.attr('type'),
    'data'    : $form.serialize(),
    'success' : function(response){
      // process response (make CSS changes or whatever it is
      // a form submission would normally do)
    }
  });
  // prevent the normal submit and reload behavior as AJAX is now
  // handling the submission
  e.preventDefault();
});

但是，要使其正常工作，您需要一些简化的 PHP 响应变体，仅用于 AJAX 请求（避免重新发送标头、脚本标签等，只返回 jQuery 可以使用的原始数据做出 UI 决定）。

【讨论】：