如何将空数组附加到FormData对象?

时间:2017-10-19 11:15:04

标签: javascript php ajax form-data

我有以下问题:

一个html表单,在FormData上使用N个复选框,通过ajax发送请求及其信息。在PHP上,$ _POST [' teste']变量不存在......

<form id="teste_form">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">...
</form>

<script>
    var form_data_obj = new FormData( document.getElementById('teste_form') );
    $.ajax({
        ...
        data: form_data_obj
        ...
    });
</script>

我知道我可以使用&#34; if(isset(...))&#34;关于PHP,但我真的不喜欢这个解决方案。对我来说,最好的解决方案是从FormData对象向PHP发送一个空数组。

Obs:我试​​过像某些事情,例如:

  • form_data_obj.append(&#39; teste []&#39;,undefined)。
  • form_data_obj.append(&#39; teste []&#39;,0)。

但没有成功...... PHP的结果分别是:[&#34; undefined&#34;],[&#34; 0&#34;]

我想在PHP中获得$ _POST [&#39; test&#39;] = []

这可能吗?

3 个答案:

答案 0 :(得分:1)

闻起来像这样:How to Submit empty array from HTML Form Post to PHP

解决方法:您可以在客户端使用空值的隐藏输入元素,并在服务器端使用空值检查。有这样的事情:

var appended = null;
$('.confirm_appointment').submit(function(e) {

  if (appended !== null) appended.remove();
  /************************************/
  if ($("input[name='teste[]']:checked").length == 0) {
    appended = $("<input type='hidden' name='teste[]' value=''>").appendTo($(this));
  }
  /************************************/

  e.preventDefault();
  $(this).append(decodeURIComponent($(this).serialize()) + '<br />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='confirm_appointment' method='post' class='confirm_appointment'>
  <input type='checkbox' name="teste[]" value='hello1' />
  <input type='checkbox' name="teste[]" value='hello2' />
  <input type='checkbox' name="teste[]" value='hello3' />
  <input type='checkbox' name="teste[]" value='hello4' />
  <input type='submit' class='update_appointment_button' value='submit' /><br />
</form>

在PHP方面:

$teste = array_filter($_POST["teste"]);

答案 1 :(得分:0)

即使没有jQuery,这绝对是可能的。

if (isset($_GET['company-status']) && !empty($_GET['company-status'])) { $query['meta_query'][] = array( 'key' => 'company_status', 'value' => $_GET['company-status'], ); } $query = array( 'post_type' => 'company-post', 'posts_per_page' => $posts_per_page, 'orderby' => 'title', 'order' => 'ASC', );

答案 2 :(得分:0)

我不知道这是否相关,但是对于我的实现而言,以下工作效果很好。定义空数组后,它必须循​​环遍历实际数组,以递归方式声明对象,以迎合对象和子数组等。

A

这样就地使用了,我的整个FormData构建看起来像这样...

formData.append(key + '[]', []);

调用代码如下所示(它是递归的,因此在考虑发送到genericBuildFormData函数的参数时请记住这一点)

/* ............................................................ */
/* .........runPostFetchScripts Can be used throughout [AF].... */
function runPostFetchScripts(id, str) {
    // Try and break out any scripts that need to also be run from the newly acquired HTML body (these don't naturally get run)...
    // Find ALL script tags (most basic form ONLY for now)...
    //console.log(str);
    scripts = str.split('<sc' + 'ript>');
    // First element will be content, so remove it
    if(scripts.length > 1) {
        scripts.splice(0, 1);
        one_biggy = "";
        for(i = 0; i < scripts.length; ++i) {
            // Then get rid of following content after end of script tag
            scripter = scripts[i].split("</sc" + "ript>");
            // And run what is left...
            //console.log(i + ": " + scripter[0]);
            one_biggy += scripter[0];
        }
        //console.log(one_biggy);
        eval(one_biggy);
    }
    // Phew!  This took way longer than expected [AF]!
}

/* ............................................................ */
/* .........New inclusion for FormData Validation and addition of Files, Multiple Files and Arrays to Form uploads via Ajax.... */
function genericBuildFormData(formData, data, previousKey) {
    /*
    console.log("genericBuildFormData(");
    console.log(formData);
    console.log(data);
    console.log(previousKey);
    //*/
    if(data instanceof File) {
        //console.log(previousKey + " file append...");
        formData.append(previousKey, data);

    } else if (data instanceof Object) {
        var keys = Object.keys(data);
        for(var k = 0; k < keys.length; ++k) {
            var key = keys[k];
            var value = data[key];
            /*
            console.log(k + " " + key);
            console.log(!(value instanceof File));
            console.log(value instanceof Object);
            console.log(!(Array.isArray(value)));
            console.log(value);
            //*/
            if(previousKey != '') {
                key = previousKey + '[' + key + ']';
            }
            if (!(value instanceof File) && (value instanceof Object) && !(Array.isArray(value))) {
                //console.log("Is Object, go again... " + key + "[]");
                formData.append(key + '[]', []);
                genericBuildFormData(formData, value, key);
            } else {
                if (Array.isArray(value)) {
                    //console.log(key + " is Array...");
                    // Define empty array first...
                    formData.append(key + '[]', []);
                    // Now loop through all array contents, accounting for embedded objects and sub-arrays...
                    for (var a = 0; a < value.length; ++a) {
                        //console.log(a);
                        genericBuildFormData(formData, value[a], key + '[' + a + ']');
                    }
                } else {
                    //console.log(key + " append...");
                    formData.append(key, value);
                }
            }
        }
    } else {
        //console.log(previousKey + ": " + data + " append...");
        formData.append(previousKey, data);
    }
}
/* ............................................................ */
/* .............genericAjaxCall Can be used throughout [AF].... */
function genericAjaxCall(GetPost, FullUrl, PostParams, Container, id, callback) {
    /*
    console.log("genericAjaxCall(...");
    console.log(FullUrl);
    console.log(PostParams);
    console.log(Container);
    console.log(id);
    //*/
    var GET_POST = GetPost.toUpperCase();
    var jacks = {
        url: FullUrl,
        type: GET_POST,
        async: true,
        processData: false, // Due to contentType, assume WE have got the data right, so do not allow AJAX to find fault with what we have done (files and arrays will fail otherwise) [AF]
        contentType: false, // Let Ajax work this out for us seeing as we are going to be mixing arrays, objects and files as well as primitives, so don't tell it anything [AF]
        success: function(strResult) {
            populateContainer = (Container ? document.getElementById(Container) : false);
            //console.log(populateContainer);
            if(populateContainer) {
                //populateContainer.innerHTML = ""; // To drop possible scroll values
                populateContainer.innerHTML = strResult;

                //console.log(strResult);
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, strResult);
                    }, 100);
                }
            } else {
                //console.log("ajax.strResult: " + FullUrl + " " + id + " = " + strResult);
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, strResult);
                    }, 100);
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            populateContainer = document.getElementById(Container);
            if(populateContainer) {
                populateContainer.innerHTML = "Error: " + textStatus + " - " + errorThrown;
            } else {
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, null, 'Error: ' + textStatus + ' - ' + errorThrown);
                    }, 100);
                } else {
                    console.log('Error: ' + textStatus + ' - ' + errorThrown);
                }
            }
        }
    };
    if(GET_POST == "POST") {
        //console.log(PostParams);
        // Use FormData for File Upload inclusion
        var myFormData = new FormData();
        genericBuildFormData(myFormData, PostParams, '');
        jacks.processData = false;
        jacks.contentType = false;
        jacks.data = myFormData;
    }
    //console.log(jacks);
    $.ajax(jacks);
}

在chrome的“网络标题”(提交时)中查看时,结果数据看起来像这样...

var myFormData = new FormData();
genericBuildFormData(myFormData, PostParams, '');

...其中数组元素0,2,3,4为空,元素1为嵌入对象。

希望这会有所帮助。沙洛姆。