通过ajax将数组传递给php

Question

Hello I am trying to pass array called myArray to php.

<script type = "text/javascript" >
    $(document).ready(function () {
        var tagApi = $(".tm-input").tagsManager();
        var myArray = [];


        jQuery(".typeahead").typeahead({
            name: 'email',
            displayKey: 'email',
            source: function (query, process) {
                return $.get('Data.php', {
                    query: query
                }, function (data) {
                    data = $.parseJSON(data);
                    console.log(data);
                    return process(data);

                });
            },
            afterSelect: function (item) {
                tagApi.tagsManager("pushTag", item);
                myArray.push(item);
                console.log('This is myArray', myArray);
            }


        });

        $.ajax({
            type: "POST",
            url: "Data.php",
            data: {
                myArray: myArray
            },
            success: function () {
                $("#submit").submit();
            }
        });
    }); 
</script>

But when I am trying to get myArray like:

<?php $myArray = $_REQUEST['myArray']; 
echo "This is myArray: ".$myArray; 
?>

I see only echo This is my Array without any data from myArray. How should I pass myArray to get it in php?

Submit is my button which got id submit. After submit form I just want to pass myArray and get it in my php file.

Or maybe I am doing something wrong and just myArray is empty? my console.log works good and I can see all data from myArray

Edit: There is html section

<form action="Data.php" method="post" id="submit">

    <div class="form-group">
        <label>Add Tags:</label><br />
        <input type="text" name="email" placeholder="Email" autocomplete="nope" autocomplete="off" class="typeahead tm-input form-control tm-input-info" />
    </div>

    <div class="form-actions form-group"><button type="submit" value="add" name="add" class="btn btn-success btn-block">Utwórz</button></div>
</form>

Answer 1

You are calling ajax inside .ready () which means it will call once your document is fully loaded. You have to call the ajax when user clicks on submit button

Try this

  <script type = "text/javascript" >
  $(document).ready(function () {
    var tagApi = $(".tm-input").tagsManager();
    var myArray = [];


    jQuery(".typeahead").typeahead({
        name: 'email',
        displayKey: 'email',
        source: function (query, process) {
            return $.get('Data.php', {
                query: query
            }, function (data) {
                data = $.parseJSON(data);
                console.log(data);
                return process(data);

            });
        },
        afterSelect: function (item) {
            tagApi.tagsManager("pushTag", item);
            myArray.push(item);
            console.log('This is myArray', myArray);
        }


    });

  $(".btn").click (function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "Data.php",
        data: {
            myArray: myArray
        },
        success: function () {
            $("#submit").submit();
        }
    });
   });
});