如何在WordPress的AJAX动作函数中使用jQuery实现手机号注册查重提示

核心问题说明：AJAX属于前后端异步通信，PHP侧输出的<script>标签只会作为字符串返回给前端JS回调，不会自动插入页面执行。正确实现逻辑为PHP仅返回状态标识，前端JS根据返回状态执行对应的DOM操作/弹窗逻辑。

1. PHP代码改造 #

替换原有AJAX处理函数，用WordPress内置wp_send_json返回结构化状态，不需要输出任何前端代码：

add_action('wp_ajax_zt_save_campain_form_data',function() {
    check_ajax_referer('title_send_nonce');
    if(empty($_POST['values'])){
        wp_send_json([
            'code' => 400,
            'msg' => '请求参数为空'
        ]);
    }
    $value = $_POST['values'];
    $which_form = $value[4]['value'];
    $register_mobiles = get_post_meta($which_form, 'register_mobiles_list',true);
    // 手机号/账号已注册判断
    if(in_array($value[1]['value'] , $register_mobiles) || in_array($value[2]['value'] , $register_mobiles)){
        wp_send_json([
            'code' => 400,
            'msg' => '该手机号或Instagram账号已注册'
        ]);
    }
    // 正常保存逻辑
    $camp_data=get_post_meta($which_form, 'campain_data',true);
    $last_code=get_post_meta($which_form, 'last_code',true);
    $last_code++;
    update_post_meta($which_form, 'last_code' , $last_code);
    $user_data= array(
        'name'=>$value[0]['value'], 
        'instagram_id'=>$value[1]['value'],
        'mobile'=>$value[2]['value'],
        'user_code'=>$last_code
    );
    array_push($register_mobiles,$value[1]['value']);
    array_push($register_mobiles,$value[2]['value']);
    update_post_meta($which_form, 'user_info_'.$last_code , $user_data);
    update_post_meta($which_form, 'register_mobiles_list' , $register_mobiles);
    wp_send_json([
        'code' => 200,
        'msg' => '注册成功',
        'user_code' => $last_code
    ]);
});

2. JS代码改造 #

调整回调逻辑，根据PHP返回的状态码执行对应前端操作，同时修复原有search方法的逻辑错误：

jQuery(document).ready(function($){
    $('form[name="contact-me"]').on('submit', function(e) {
        e.preventDefault();
        var form_data = $(this).serializeArray();
        $.post(zt_send_form_obj.ajax_url, {
            action: "zt_save_campain_form_data",
            _ajax_nonce: zt_send_form_obj.nonce,
            values: form_data
        }, function(res) {
            if (res.code == 200) {
                console.log("注册成功");
                // 可自定义成功后的操作：比如清空表单、跳转到成功页
            } else if(res.code == 400){
                console.log("已注册");
                // 执行你需要的提示逻辑：弹窗/追加提示文本
                $('#camp_section').append('<div class="register-tip">'+res.msg+'</div>');
                // 要弹出提示框直接用 alert(res.msg) 即可
            }
        },'json'); // 指定返回数据格式为JSON
    });
});

注意事项 #

• WordPress AJAX处理函数必须终止执行，wp_send_json底层已自带终止逻辑，不需要额外加wp_die()，如果不用JSON返回则需要手动加wp_die()，否则返回结果末尾会自动追加多余的0导致格式错误。
• 现有代码依赖表单序列化后的索引取值，建议优化为按字段名匹配取值，避免后续调整表单字段顺序后逻辑失效。

内容的提问来源于stack exchange，提问作者zahra taran