将多个变量从HTML传递到Ajax，而不是将多个变量从Ajax发布到php

I have the following form, which has 3 values. Class, Section and School. The school is selected from a drop down list that is brought from database. (for simplicity I have not included those details here.. ) (in reality my code works)

<form id="form1" name="form1" method="post" action="">                   
<input type="hidden" name="class" value="someclass">
<input type="hidden" name="section" value="somesection">
<select name="school" id="school">          
<option> "school 1"  </option>  
<option> "school 2"  </option>
<option> "school 3"  </option>
<option> "school 4"  </option>
<option> "school 5"  </option>                  
</select>       
</form>

I am doing this for the Ajax, and for only 1 variable (the item from list) was working fine, however after adding the class and the section values, I was not able to get those 3 into the Ajax, so that I can post them into the PHP. (syntax might be wrong as this is just copy paste some of the portion of the code.)

$("#school").change(function ()
{
 resetValues();


    var school = { school:$(this).attr('value') };
    var class= { class:$(this).attr('value')    };
    var section= { section:$(this).attr('value')};

jQuery.ajax({
                  url: 'getTheData.php',
                  type: "POST",
                  dataType: "xml",
                  data:school&class&section,
                  async: false,
                  success: schoolOnSuccess
            });

And naturally I am using _POST to get the values on the getTheData.php the traditional way.

Where am I going wrong ?

Instead of using like this, you can serialize the form elements and send.

$("#school").change(function ()
{
   resetValues();
   var data = $("#formid").serialize();
   jQuery.ajax({
              url: 'getTheData.php',
              type: "POST",
              dataType: "xml",
              data:data,
              async: false,
              success: schoolOnSuccess
   });
});

You can access the values in php function by using the name of form elements.

The advantage of this method is, you don't have to change your script when you add or modify any form element.

You can try this:

    $('#school').change(function(){
        $.get('getTheData.php', $('#form1').serialize(),
        function(){
           alert('Success!');
        },function(){
           alert('Unsuccess!');
        });
    });

and request will send with data on url.

try this, make your object-data

data:{
        'post-field-name' : 'post-field-value'
}

so your ajax script will become :

jQuery.ajax({
    url: 'getTheData.php',
    type: "POST",
    dataType: "xml",
    data:{
        'school' : school,
        'class' : class,
        'section' : section
    }
    async: false,
    success: schoolOnSuccess
});