如何在WordPress AJAX中同时传递动作和表单数据?

时间:2017-09-22 作者:Nitin Johnson

我有一张登记表,在那里我试图注册新成员。我试图在wordpress中传递图像上传的formdata和ajax操作。目前,我正在尝试在控制台中打印这些值。但是ajax函数根本没有被调用,因为操作不起作用。我该怎么做呢。请帮帮我。

HTML

<form id="landlordregform" method="post" action="" enctype="multipart/form-data" novalidate="novalidate">
   <div class="registrationformbox landloardregformbox">
      <div id="custommsg"></div>
      <table width="100%">
         <tbody>
            <tr>
               <td><input type="text" name="username" placeholder="USERNAME*" id="username" class="valid" aria-invalid="false"></td>
               <td><input type="password" name="password" placeholder="PASSWORD*" id="password" class="valid validate-equalTo-blur" aria-invalid="false"></td>
               <td><input type="password" name="confirmpassword" placeholder="CONFIRM PASSWORD*" class="valid" aria-invalid="false"></td>
            </tr>
            <tr>
               <td><input type="text" name="name" placeholder="NAME*" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="email" placeholder="EMAIL*" id="email" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="telephone" placeholder="TELEPHONE*" class="valid" aria-invalid="false"></td>
            </tr>
            <tr>
               <td><input type="text" name="town_city" placeholder="TOWN/CITY*" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="postcode" placeholder="POST CODE*" class="valid" aria-invalid="false"></td>
               <td><input type="file" name="profilepic" class="valid" aria-invalid="false"></td>
            </tr>
         </tbody>
      </table>
      <table width="100%">
         <tbody>
            <tr>
               <td><textarea name="address" placeholder="ADDRESS*" class="valid" aria-invalid="false"></textarea></td>
            </tr>
         </tbody>
      </table>
      <div class="submitubttonbox"><button type="button" name="landlordregisterbutton" id="landlordregisterbutton" class="qbutton white big_large">Register</button></div>
   </div>
</form>

jQuery

jQuery("#landlordregisterbutton").click(function(){
        if(jQuery("#landlordregform").valid()){
            var formData=new FormData(document.getElementById(\'landlordregform\'));  
            //formData.append( \'file\', input.files[0] );            
            jQuery.ajax({
                url: jQuery("#cusajaxurl").val(),
                type: \'POST\',
                data: formData + \'&action=custom_landlord_registration_process\', 
                cache: false,
                processData: false, 
                contentType: false,     
                success: function(data) {
                    console.log(data);
                }
            });
        }
    });

Functions

add_action(\'wp_ajax_nopriv_custom_landlord_registration_process\',\'custom_landlord_registration_process\');

add_action(\'wp_ajax_custom_landlord_registration_process\',\'custom_landlord_registration_process\');

    function custom_landlord_registration_process(){
        //$formdata=array();
        //parse_str($_POST[\'formdata\'],$formdata);


        print_r($_POST);

        die();
    }

2 个回复
最合适的回答,由SO网友:mmm 整理而成

尝试在formdata中添加操作:

        var formData=new FormData(document.getElementById(\'landlordregform\')); 

        formData.append("action", "custom_landlord_registration_process");   

        jQuery.ajax({
            url: jQuery("#cusajaxurl").val(),
            type: \'POST\',
            data: formData, 
            cache: false,
            processData: false, 
            contentType: false,     
            success: function(data) {
                console.log(data);
            }
        });

SO网友:Annapurna

您可以通过以下方式发送数组中任意数量的数据:

jQuery.ajax({
        url: jQuery("#cusajaxurl").val(),
        type: \'POST\',
        data: {
            \'action\' : \'custom_landlord_registration_process\',
            \'form_data\' : formData,
        },
        cache: false,
        processData: false, 
        contentType: false,     
        success: function(data) {
            console.log(data);
        }
    });
然后以$\\u POST[\'form\\u data\']的形式访问php文件中的formData。

结束

相关推荐

如果通过AJAX加载帖子,则图像附件查询不起作用

我的问题是:我试图通过ajax显示一个附在帖子上的图片库。还可以通过ajax从主页动态加载帖子。然而,检索图像的查询返回一个空数组。奇怪的是same query 如果库是通过ajax加载的,而帖子是“传统”加载的,那么实际上是可行的。更清楚地说:第一种情况:我在索引中。php我通过索引中的ajax动态加载帖子。php我从刚加载的帖子中通过ajax动态启动库库不工作第二种情况:我单身。php(意味着帖子是传统加载的,而不是通过ajax加载的)我通过ajax动态启动图库,图库工作正常,下面是我用来检索附加图像