Things I don't understand about the ajax function

Things I don't understand about the ajax function

Say I have a form like this (taken from a book on jquery):

  1. <body>
  2. <form>
  3. <label>Enter your Name</label>
  4. <input type="text" name="uname" class="uname" />
  5. <br/>
  6. <input type="submit" id="submit" />
  7. </form>
  8. <div id="message"></div>
  9. </body>

and an ajax function like this:

  1. $(document).ready(function () {
  2. $('#submit').click(function () {
  3. var name = $('.uname').val();
  4. var data = 'uname=' + name;
  5. $.ajax({
  6. type: "POST",
  7. url: "welcome.php",
  8. data: data,
  9. success: function (html) {
  10. $('#message').html(html);
  11. }
  12. });
  13. return false;
  14. });
  15. });

and the script file looks like this:

  1. <?php $name = $_POST['uname']; echo "Welcome ". $name; ?>

it will work but here's what I can't understand. If the welcome.php script gets the value of $name from the POST array, why does it need to have the data sent to it by the ajax request? The POST array already contains that information surely?

Also, my understanding is that the ajax request is in the form of key/value pairs but the data is sent in the form uname=name but key/value pairs don't normally have an equals sign.

What's going on here - it works but it doesn't make sense to me and I hate just punching in code I have learnt by rote.