jquery ajax and php arrays

Question

Hi There, I am trying to submit some data to a PHP script, however the PHP scripts expects the data to arrive in a specific format, like this example which is a dump of the post,

Array ( [save] => Add to shortlist [cv_file] => Array ( [849709537] => Y [849709616] => Y [849709633] => Y ) )

The process is currently that a user selects the product they want using checkboxes and then clicks a submit button which fires the PHP scripts,

The HTML looks like this,

div class="row">

                        <ul>
                            <li class="drag_check ui-draggable">
                                <input type="checkbox" id="inp_cv_849709537" name="cv_file[849709537]" class="cv_choice" value="Y">
                            </li>

                            <li class="id"><a href="/search/cv/849709537">849709537</a></li>
                            <div class="disp">
                            <li class="location">Huddersfield</li>
                            <li class="status">
                            Not currently working                               </li>
                            <li class="education">other</li>
                            <li class="role">
                            Temporary                               </li>
                            <li class="salary">£100,000 or more</li>
                            <div class="s">&nbsp;</div>
                            </div>
                        </ul>
                            <dl>
                                <dt>Current Role</dt>
                                <dd>Developer </dd>
                                <dt>Sectors</dt><dt>
                                </dt><dd>
                                    Energy &amp; Utilities, Healthcare, Hospitality &amp; Travel, Installation &amp; Maintenance, Installation &amp; Maintenance                                    </dd>

                                <dt>About Me</dt><dt>
                                </dt><dd></dd>
                                </dl>
                                <div class="s"></div>
                    </div>

I am needing to use AJAX instead now, but I need to send the data to PHP in the format it expects here is what I have so far,

$('#addshortlist').click(function() {
var datastring = ui.draggable.children().attr('name')+"="+ui.draggable.children().val()+"&save=Add to shortlist";
alert(datastring);
$.ajax({
    type: 'POST',
    url: '/search',
    data:ui.draggable.children().attr('name')+"="+ui.draggable.children().val()+"&save=Add to shortlist",
    success:function(){
        alert("Success"+datastring);
    },
    error:function() {
        alert("Fail"+datastring);
    }
}); 
return false;

});

I would really appreciate any help

Answer 1

To get the resulting PHP output, you need to assemble an object literal as below:

var your_data = {
    save: 'Add to shortlist',
    cv_array: {
        '849709537': 'Y',
        '849709616': 'Y',
        '849709633': 'Y'
    }
};

Then you can do this

$.ajax({
    type: 'POST',
    url: 'http://example.com/path/to/script.php',
    data: your_data,
    success: function(data){
        $('#debug').html(data);
    },
    dataType: 'html'
});

(Incidentally, The base HTML that would produce your output would be):

<form action="http://example.com/path/to/script.php" method="POST" id="myForm">
    <input name="save" value="Add to shortlist">
    <input type="checkbox" name="cv_array[849709537]" value="Y" checked>
    <input type="checkbox" name="cv_array[849709616]" value="Y" checked>
    <input type="checkbox" name="cv_array[849709633]" value="Y" checked>
    <input type="submit" value="Continue &rarr;">
</form>

Now, if you've not changed your form, all you really need to do is make the ajax call, and the data you pass would be assembled with jQuery's serialize() method, which rolls up all the content of a form into something you can pass to a server-side script:

$.ajax({
    type: 'POST',
    url: 'http://example.com/path/to/script.php',
    data: $('#myForm').serialize(),
    success: function(data){
        $('#debug').html(data);
    },
    dataType: 'html'
});