Ajax：一个 ajax 请求另一种形式

Question

我在一页中有 3 个联系表（页眉、页面、页脚）。 我如何为所有表单创建一个 ajax 请求？ 我希望当用户单击每个表单时仅从该表单发送数据。 刚刚从所有表格发送。 我使用hasClass来确定从哪个类发送数据，但我做不到

HTML:

<form id="contact-form1" method="POST" class="d-flex form">
    <input type="text" class="simple-input" id="name" placeholder="Name">
    <input type="text" class="simple-input" id="email" placeholder="Email address">
    <textarea class="quession-input" id="msg" placeholder="Your question"></textarea>
    <div class="checkboks custom-sq">
        <input type="checkbox" class="checked-checkbox" name="myCheckboxes[]" id="box1" checked="checked" value="true" />
        <label for="box1" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
    </div>
    <button type="submit" id="submit" class="danger-btn submit1"><?php echo the_field('btn_send', 'option'); ?></button>
</form>

<form id="contact-form" method="POST" class="d-flex form">
    <input type="text" class="simple-input" id="hy_name" placeholder="Name">
    <input type="text" class="simple-input" id="hy_email" placeholder="Email address">
    <textarea class="quession-input" id="hy_msg" placeholder="Your question"></textarea>
    <div class="checkboks custom-sq">
        <input type="checkbox" id="box3" class="checked-checkbox" checked="checked" />
        <label for="box3" class="checkboks-text"><?php echo the_field('checkbox_text', 'option'); ?></label>
    </div>
    <button type="submit" id="submit" class="danger-btn hy-submit submit2"><?php echo the_field('btn_send', 'option'); ?></button>
</form>

阿贾克斯：

jQuery('.submit, .hy-submit').on('click', function(e) {
    e.preventDefault();
    // All data from form
    var str = $(this).closest('form').serialize();

    // Get current page url
    var page_url = window.location.toString();

    // Vars
    var name = jQuery('#name').val();
    var hy_name = jQuery('#hy_name').val();
    var email = jQuery('#email').val();
    var hy_email = jQuery('#hy_email').val();
    var msg = jQuery('#msg').val();
    var hy_msg = jQuery('#hy_msg').val();
    var subj = jQuery('#subj').val();


var obj=$(this);

if($(obj).hasClass('hy-submit')){
    validatehyEmail(hy_email);
    if (hy_msg == '' || hy_email == '' || validatehyEmail(jQuery('#hy_email').val()) == false) {
        validatehyEmail(hy_email);
        validateText(jQuery('#hy_msg'));
        validateText(jQuery('#hy_name'));
        return false;
    }
    console.log('submit');
   } else if ($(obj).hasClass('submit')) {
        validateEmail(email);
        if (msg == '' || email == '' || validateEmail(jQuery('#email').val()) == false) {
            validateEmail(email);
            validateText(jQuery('#msg'));
            validateText(jQuery('#name'));
            return false;
        }
        console.log('submit');
   }
    // Get checkbox value
    var chkElem = document.getElementsByName("myCheckboxes[]");
    var choice ="";

    for(var i=0; i< chkElem.length; i++)
    {
        if(chkElem[i].checked)
            choice = choice + chkElem[i].value;
    }

    jQuery.ajax({
        type: "post",
        url: ajaxactionurl,
        data: "action=send_email&" + str + "&myCheckboxes=" + choice + "&url=" + page_url,
        success: function (response) {
            jQuery('#contact-form input').val('');
            jQuery('#contact-form textarea').val('');
            jQuery('.submit').text('Done!');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
        }
    });

});

PHP:

add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {

    $checkbox = $_POST['myCheckboxes'];
    if (isset($checkbox)) {
        echo $checkbox;
    }
    $headers = 'Content-Type: text/html; charset="utf-8"';
    $name = $_POST['name'];
    $url = $_POST['url'];
    $hy_name = $_POST['hy_name'];
    $from = 'contact@test.com';
    $to = 'test@test.com';
    $email = $_POST['email'];
    $hy_email = $_POST['hy_email'];
    $msg = $_POST['msg'];
    $hy_msg = $_POST['hy_msg'];
    $subject = 'Footer form: ' . $_POST['email'];
    $message .= (!empty($name)) ?  '<p><strong>User Name</strong> : ' . $name .'  </p>' : '';
    $message .= (!empty($email)) ?  '<p><strong>User Email</strong> : '. $email .'</p>' : '';
    $message .= (!empty($msg)) ?  '<p><strong>User Message</strong> : '.$msg .'</p>' : '';
    $message .= (!empty($checkbox)) ?  '<p><strong>Checkboxs</strong> : '.$checkbox .'</p>' : '';
    $message .= (!empty($url)) ?  '<p><strong>Url:</strong> : '.$url .'</p>' : '';

    $message .= (!empty($hy_name)) ?  '<p><strong>User Name</strong> : '.$hy_name .'</p>' : '';
    $message .= (!empty($hy_email)) ?  '<p><strong>User Email</strong> : '.$hy_email .'</p>' : '';
    $message .= (!empty($hy_msg)) ?  '<p><strong>User Message</strong> : '.$hy_msg .'</p>' : '';
    $message .= '</body></html>';
    echo mail($to, $subject, $message, $headers);
    return  $msg;
    die();
}

Answer 1

使用表单 id 属性并使用preventDefault方法来阻止表单提交。

$('#form-id').preventDefault();