Send form data with Ajax

I was wondering if anyone knew how to send data from a form (before it submits to the server I presume) to an api url?

I was given the url I need which looks some like:

http://api.example.com/NMSREST?random=0000000000000000&encrypt=000000000000000000&email=email@email.com&senddate=2011%2D08%2D08%2023%3A30%3A00&uidkey=email&stype=UPDATE&dyn=to:email@email.com

I think the best way to go about this is to use AJAX, but I real开发者_StackOverflow中文版ly have no clue of where to begin.

---

var parameter = { aaa:'bbb', ccc:'ddd' };

$.ajax({ url:'http://abc.cde.com/abbb', type:'post', data:param, dataType:'json', success:function(msg){ alert('YOUR SUCCESS MESSAGE'); } });

---

Try this

var param = {
    random:'0000000000000000',
    encrypt:'000000000000000000',
    email:'email@email.com',
    senddate:'2011%2D08%2D08%2023%3A30%3A00',
    uidkey:'email',
    stype:'UPDATE'
};

$.ajax({
    url:'http://api.example.com/NMSREST',
    type:'post',
    data:param,
    dataType:'json',
    success:function(msg){
        alert('YOUR SUCCESS MESSAGE');
    },
    error:function(){
        alert('Error in loading...');
    }
});

---

A good starting place is probably a competent JavaScript library that can help you to manage the AJAX request.

I would suggest jQuery. It includes useful methods to make AJAX requests, and get form data out of your form before submission.

Judging by the URL you've given, the request would probably be a GET request, so here's the relevant jQuery documentation on making a GET request with AJAX: http://api.jquery.com/jQuery.get/

As for submitting the data, you can serialise a form into a query string to append to a URL with the serialize method of jQuery documented here: http://api.jquery.com/serialize/

---

On click event: Something like this, I may have typos... And the url is incomplete...it is just a path you could take

$('#target').click(function() {
  $.ajax({
   type: "GET",
   url: "some.php",
   data:" NMSREST?random="+$('#selector1').val()+"&encrypt="+$('#selector1').val(),
   success: function(msg){
    // alert( "Data Saved: " + msg );
   }
 });
});