使用 ajax 处理表单 - Use ajax to process form

Use ajax to process form

本文关键字：表单处理 ajax 使用 | 更新日期: 2023-09-27

我正在制作一个表单，访问者可以在其中订阅邮件列表。

代码为：

    function subscribe_form() {
        global $my_subme;
        $form = '';
        $msg = '';
        if ( isset( $_GET['status'] ) ) {
            if ( 'subscribed' === $_GET['status'] ) {
                $msg = __( 'Thank you for confirming your subscription', 'subme' );
            } else if ( 'unsubscribed' === $_GET['status'] ) {
                $msg = __( 'You have successfully unsubscribed.', 'subme' );
            } else {
                $msg = __( 'Sorry, but something went wrong.', 'subme' );
            }
            $form .= '<p>';
            $form .= esc_html( $msg );
            $form .= '</p>';
        } else {
            /* Process the form when submitted */
            if ( ( isset( $_POST['subscribe'] ) || isset( $_POST['unsubscribe'] ) ) && isset( $_POST['source'] ) && 'widget' === $_POST['source'] ) {
                /* Check nonce */
                if ( ! isset( $_POST['subme_widget_nonce'] ) || ! wp_verify_nonce( $_POST['subme_widget_nonce'], 'subme_widget' ) ) {
                    return;
                }
                if ( ! isset( $_POST['email'] ) ) {
                    return;
                }
                if ( ! $my_subme->is_valid_email( strtolower( $_POST['email'] ) ) ) {
                    $msg = __( 'Sorry, but this does not seem like a valid email address.', 'subme' );
                } else {
                    if ( isset( $_POST['subscribe'] ) ) {
                        $msg = $my_subme->subscribe( $_POST['email'] );
                    } else {
                        $msg = $my_subme->unsubscribe( $_POST['email'] );
                    }
                }
            }
            $form .= '<form method="post">';
            $form .= wp_nonce_field( 'subme_widget', 'subme_widget_nonce', true, false );
            $form .= '<input type="hidden" name="source" value="widget" />';
            $form .= '<p>';
            $form .= __( 'Your email address:', 'subme' ) . '<br />';
            $form .= '<input type="text" name="email" /><br /><br />';
            $form .= '<input type="submit" name="subscribe" value="' . __( 'Subscribe', 'subme' ) . '" />';
            $form .= ' ';
            $form .= '<input type="submit" name="unsubscribe" value="' . __( 'Unsubscribe', 'subme' ) . '" />';
            $form .= '</p>';
            $form .= '</form>';
            if ( strlen( $msg ) > 0 ) {
                $form .= '<p>';
                $form .= esc_html( $msg );
                $form .= '</p>';
            }
        }
        echo $form;
        echo '</div>';
    }

subscribe_form();

如何更改此代码以便使用 ajax 进行处理？如您所见，目前只是用户提交表单时的页面刷新。

如果您有两个提交，则只有第二个将发送到表单...您需要执行类似 2 个表单的操作，或添加一个 onclick 事件来更改名称或类型或隐藏值......像这样：

<input type="submit" onclick="document.getElementById('action').value='subscribe'" value="Subscribe" />
<input type="submit" onclick="document.getElementById('action').value='unsubscribe'" value="Unsubscribe" />
<input type="hidden" name="action" id="action" />

1.- 你显示的代码是php，好的。这是服务器端。

2.- 从客户端。你应该有发送到服务器的代码javascript，数据说这个客户端想要订阅。