AJAX and PHP data transfer

Question

Well basically what im trying to do is create a method that can take any datatype and essentially convert it into php recognized data or JSON for that matter. So say i wanted to pass an array, a 2d array, or just some basic string. I would call this function pass in the parameters and sent it off to php. Now i would reverse engineer this function to be able to translate what was sent and get it as a php array, or just a string. I'm good at php arrays but iam bad at javascript ones, here lies my dilemma. If anyone could give me some insight into the javascript side, i can take if from there. The most important however is how to send an array with javascript with php that is DYNAMIC, that is, its dimension can change and its length. Say for example this function handles different forms of different number of input fields, it needs to post this form's input fields into an array, convert to JSON and send.

Appreciate any help i can get or a guide in the right direction, thank you.

Answer 1

Here is an example using jQuery, AJAX, JSON and PHP JSON encode. I hope it will help you to understand the flow.

test.php:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='_test.php' method='post' class='ajaxform'>
 <input type='text' name='txt1' value='Test Text 1'>
 <input type='text' name='txt2' value='Test Text 2'>
 <input type='submit' value='submit'>
</form>

<br /><br />

<div id='testDiv1'>txt1's text comes here....</div>
<div id='testDiv2'>txt2's text comes here....</div>

_test.php:

<?php
      $arr = array( 'testDiv1' => $_POST['txt1'], 'testDiv2' => $_POST['txt2'] );
      echo json_encode( $arr );
?>

jsFile.js

jQuery(document).ready(function(){

 jQuery('.ajaxform').submit( function() {

  $.ajax({
         url  : $(this).attr('action'),
         type : $(this).attr('method'),
         dataType: 'json',
         data : $(this).serialize(),
         success : function( data ) {
                    for(var id in data) {
                       jQuery('#' + id).html( data[id] );
                    }
                   }
     });

  return false;
 });

});