如何制作一个提交表单但不重新加载页面的按钮？答案

【问题标题】：How to make a button which submits a form but doesn't reload the page?如何制作一个提交表单但不重新加载页面的按钮？
【发布时间】：2014-03-22 14:50:59
【问题描述】：

我有一个表单，它将所有输入设置形成一个数组。 Submin 按钮是这样构造的：

<input name="save" class="button" type="submit" value="Save Settings" />
<input type="hidden" name="action" value="save" />

而处理保存或删除操作的功能是这样构造的：

function theme_settings_page() {
    global $themename,$theme_options;
    $i=0;
    $message='';
        if ( 'save' == $_REQUEST['action'] ) {
            foreach ($theme_options as $value) {
                update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
            foreach ($theme_options as $value) {
        if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
                $message='saved';}
        else if( 'reset' == $_REQUEST['action'] ) {
            foreach ($theme_options as $value) {
                delete_option( $value['id'] ); }
                $message='reset';}
        if ( $message=='saved' && $i==0 )  echo '<div id="message" class="apply"><strong>Ustawienia zachowane.</strong></div>' ;
        if ( $message=='reset' ) echo '<div id="message" class="reset"><strong>Ustawienia zresetowane.</strong></div>';

$value['id'] 实际上是从描述所有输入的数组中获取的值。表格的开头和结尾无非是：

<form method="post"></form>

表单的内容被制成标签。那么问题来了：点击保存按钮时如何让页面不重新加载？？

PS：我不确定我是否提供了足够的数据，但如果您需要了解更多信息，请尽管询问。我在网上寻找示例，但找不到合适的。

【问题讨论】：

研究here 和here。您所有的 save 和 reset 代码都应该放在 Ajax 回调 (wp_ajax_*) 中。

标签： php jquery wordpress forms

【解决方案1】：

尝试使用 jQuery ajax 函数。 https://api.jquery.com/jQuery.ajax/

【讨论】：

我会这样做，但是在每个示例中我发现有一个 'url: 'whateverfile.php',' 标记，并且我没有单独的 php 文件来存储所有表单数据.在没有 php 文件的情况下，我应该如何使用它，或者我应该使用包含表单的 php 文件？
只需设置 url，使其指向写入您的函数的文件，即使它与您的表单是同一个文件。

【解决方案2】：

点击返回 false 并使用 AJAX 提交表单（参见 jQuery 了解简单的 AJAX）：

<input name="save" class="button" type="submit" value="Save Settings" onclick="doSomething(); return false;"/>

$.ajax({url: "xyz.com/do.php", type: "POST", data: {a: $("save").val()}})

【讨论】：