javascript - 不明白为什么我无法通过 WordPress 连接我的 AJAX 处理程序

标签 javascript php jquery ajax wordpress

所以我试图遵循 instructions here like a recipe book我会简短地介绍一下。当我提交下面的表单时,对 http://thesite/wp-admin/member-update 的 POST 请求返回 404。据我了解,该请求应该触发我的函数 member_update ()因为我设置了

<?php

add_action( 'wp_ajax_member-update', 'member_update' );

?>

在我的页面的开头。我不明白为什么它不起作用。其余相关代码为形式

   <form method="POST" action="member-update"  enctype="multipart/form-data">
        <div class="modal fade" id="member-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <h2></h2>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Full name:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="text" name="fullname" value=""> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Title:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="text" name="title" value="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Bio (approx 150 chars):
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="textarea" name="bio" value=""> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Sort order:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="textarea" name="sord" value=""> 
                            </div>                          
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Pic: 
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="file" name="pic">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                <!-- empty space -->
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <button type="button" class="member-update-button wp-core-ui button-primary" id="remv-btn">Remove</button>
                                <button type="button" class="member-update-button wp-core-ui button-primary">Add</button>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="memberAction" value="" />
                </div>
            </div>
        </div>
    </form>

以及处理表单上单击的按钮的 JS

        jQuery('.member-update-button').click( function() {
                var parentForm = jQuery(this).closest('form');
                var formUrl = parentForm.attr('action');
                var formMethod = parentForm.attr('method');
                var postData = parentForm.serializeArray();
                jQuery.ajax(
                    {
                        url: formUrl,
                        type: formMethod,
                        dataType: 'json',
                        data: postData,
                        success: function(retmsg)
                        {
                            alert(retmsg); // test for now
                        }, 
                        error: function ( )
                        {
                            alert("error"); // test for now
                        }
                    }
                );
        } );

以及页面底部的PHP函数

<?php

function member_update()
{

    $message = ''; 

    $message .=  'Action : ' . $_POST['memberAction'] . '.   ';
    $message .=  'Name: ' . $_POST['fullname'] . '.    ';
    $message .=  'Title: ' . $_POST['title'] . '.    ';
    $message .=  'Biography: ' . $_POST['bio'] . '.    ';
    $message .=  'Sort order: ' . $_POST['sord'] . '.    ';
    $targetFileName = basename($_FILES['pic']['name']);
    $targetFileNameAndPath = 'assets/' . $targetFileName;
    $message .= 'Target file: ' . $targetFileName . '.    ';
    $message .= 'Target file (with path): ' . $targetFileNameAndPath . '.    ';

    $thismbr = new TeamMember($_POST['fullname'], $_POST['title'], $_POST['bio'], $_POST['sord'], $targetFileName);

    $thisAction = $_POST['memberAction']; 

    if ($thisAction == 'add')
    {

        $addMemberResult = $T->addMember($thismbr);

        if ($addMemberResult->succeeded)
        {
            $message .= "Successfully added member to list\n";

            if (move_uploaded_file($_FILES['pic']['tmp_name'], $targetFileNameAndPath))
            {
                $message .= "Successfully added " . $targetFileName . " to assets folder\n";        
            }
            else
            {
                $message .= "Encountered problem when trying to add " . $targetFileName . " to assets folder\n";
            }
        }
        else
        {
            $message .= "";
        }
    }
    elseif ($thisAction == 'update')
    {
        // ... 
    }
    elseif ($thisAction == 'delete')
    {
        // ...      
    }
    else 
    {
        $message .= 'Didn\'t recognize action';
    }

    echo json_encode($message);

}

?>  

知道我做错了什么吗?

最佳答案

    jQuery('.member-update-button').click( function() {
         var parentForm = jQuery(this).closest('form');
         var postData = parentForm.serializeArray();
            jQuery.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>", 
                data: {action: 'member_update', postData: postData},
                type: "POST",
                dataType: 'json',
                success: function(retmsg)
                {
                    alert(retmsg); // test for now
                }, 
                error: function ( )
                {
                    alert("error"); // test for now
                }
            });
    });

试试这个...

关于javascript - 不明白为什么我无法通过 WordPress 连接我的 AJAX 处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31443416/

相关文章:

php - Laravel unnioAll 多查询之间

javascript - jQuery 幻灯片切换()

javascript - 一个浏览器窗口中有两个 Web 应用程序 - 一个不需要刷新,而第二个需要刷新

javascript - 惯用的 jQuery 将列表框中的所有选项转换为逗号分隔的字符串?

javascript - ES6 `fetch is undefined`

javascript - 比较 select.val() 和 span.text() 后的错误结果

PHP 变量访问错误突然出现,只需编辑/保存相关文件即可修复,无需实际更改。是什么原因造成的?

javascript - 正则表达式来测试箭头功能

javascript - 在 angular.js 中切换类和文本

php - 使一段代码在函数和类中工作