Transfer javascript array to PHP using AJAX

Question

I have received help here und stackoverflow making an invite function. In a AJAX based search box, it is possible to invite teams. When searching for a team, finding it and then selecting it - the team will be stored in an array. However, I need the data from the array in PHP.

My question: can I transfer the javascript array to PHP using AJAX? The code can be seen below here. The AJAX part is made using jQuery.

//AJAX based search
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j("#search_results").slideUp();
    $j("#button_find").click(function(event){
        event.preventDefault();
        search_ajax_way();
    });
    $j("#search_query").keyup(function(event){
        event.preventDefault();
        search_ajax_way();
    });
});

function search_ajax_way(){
    $j("#search_results").show();
    var search_this=$j("#search_query").val();
    $j.post("search_team.php", {searchit : search_this}, function(data){
        $j("#display_results").html(data);
    })
}
// <----- AJAX search ends ------>

//Add-remove teams

//Functional object for team
var Team = function (id, name) {
    this.name = name;
    this.id = id;
}

//Array which will contain teams
var TeamList = [];

//Checking if the team is already added
function containsTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            return true;
        }
    }
    return false;
}

// Removed team by onclick-event
function removeTeam(id) {
    for (var i = 0; i < TeamList.length; i++) {
        if (TeamList[i].id == id) {
            TeamList.splice(i, 1);
            document.getElementById('teams').removeChild(document.getElementById('ta'+id));
        }
    }
}

function addTeam(tid) {
    // Grab the input value
    var teamName = document.getElementById(tid).innerHTML;
    var teamID = document.getElementById(tid).id;

    // If empty value
    if(!teamName || !teamID) {
        alert('An error occured.');
    } else {
        if(containsTeam(teamID) == false) {
            TeamList.push(new Team(teamID, teamName));

            // Create the teams with the value as innerHTML
            var div = document.createElement('div');
            div.className = 'team-to-invite';
            div.setAttribute('onclick', 'removeTeam('+teamID+')');
            div.onclick = function() { removeTeam(teamID) };
            div.id = 'ta' + teamID;
            div.innerHTML = teamName;

            // Append it and attach the event (via onclick)
            var teams = document.querySelector('#teams').getElementsByTagName('div');
            document.querySelector('#teams').appendChild(div);
        }
    }
    return false;
}

The teams are stored in TeamList().

Thanks in advance.

Answer 1

The current best way to do this is to encode the array into a string, which is the only format you can POST to a PHP script.

JSON encoding is currently the most popular standard for sending data like this over the internet. Here is an example of some encoded data:

{
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
}

In general, you will use jQuery's JSON encoding to encode the array, post this data to your PHP script, and then decode it at the PHP end.

POSTing an array with jQuery

var dataToSend = { 
    data: TeamList
};
jQuery.ajax({
    type: 'POST',
    url: "myPhp.php",
    data: JSON.stringify(dataToSend),
    dataType: "json",
    success: function(data){ alert(data); }
});

PHP to Decode the JSON

<?php
$foo = file_get_contents("php://input");
$decoded = json_decode($foo, true);
var_dump($decoded); //Print out the data
$myArray = $foo => data;

Answer 2

can I transfer the javascript array to PHP

You can only transfer strings from a browser, where you javascript executes, to a server, where your php executes. But there are well recognized string formats, e.g. json, that can be converted to arrays and such.