[SalesForce] How to pass a JavaScript array to Apex controller

I am trying to pass a Javascript array to my apex controller. I know you can pass a string from Javascript through the use of hidden input field and apex action function (and I have used it in the past) but trying a similar thing for arrays did not work.
E.g

<apex:page controller="MyController" id = "MyPage">
    <apex:form id="myForm">
        <button type="button" id="B" onclick = "setHidden()">Set Array!</button>
        <apex:inputHidden value="{!StringArr}" id="myHiddenField"/>
        <apex:actionFunction name="passArryToCon" action="{!MyConMethod}" rerender="myForm"/>
    </apex:form>
    <script type="text/javascript">
        j$ = jQuery.noConflict();
        function setHidden() {
           var StrArr = ['product 1', 'product 2', 'product 3'];
           document.getElementById('{!$Component.MyPage.myForm.myHiddenField}').value = (StrArr); //**masterpagefullwidth component id** 
           passArryToCon();
    }     
    </script>
</apex:page>

My Controller

public with sharing class MyController {
    public List<string> StringArr {get; set;}
    public PageReference MyConMethod() {
        system.debug('Passed in value: '+StringArr);
        return null;
    }
}

Could someone suggest a way to get this working? Thanks.

Best Answer

Passing an array natively wouldn't be easy, if it is even possible. Personally, I'd convert the array to JSON, then on the controller side, use JSON to turn it back to an array. You could also use page parameters, such as with an action function, but you'd ask have to convey from a string to an array.