Proper AJAX GET structure using JQUERY

Question

I have created a form with several inputs, I need to pull those values from the inputs and submit to an API using an ajax GET. I am having problems structuring my ajax call and also verifying the call was successful. I have searched and seen "GET"s structured several different ways and need to know which way is proper/ when to use different structures.

below is my form

<form id="target" method="GET" enctype="multipart/form-data" >

<p>First Name: <input class="field" type="text" name="firstName" id="firstname" required></p> 

<p>Last Name: <input class="field" type="text" name="lastName" id="lastname" required> </p>

<p>Email: <input class="field" type="email" name="email" id="email" required></p>

<p>Zip Code:<input class="field" type="number" name="zip" id="zip" required></p>
<p class="small"><input type="checkbox" id="privacy" name="privacy" value="Agree" required>I certify that I am a U.S. resident over the age of 18, and I agree to the Privacy Policy</p>

here is my jquery assigning the form values to variables and the ajax call

$(document.ready(function(){  ............


     $('#target').submit(function(event) {
    // get the form data

        var firstName = $('input[name=firstName]').val();
        var lastName  = $('input[name=lastName]').val();
        var email     = $('input[name=email]').val();
        var zip       = $('input[name=zip]').val();



    // process the form
    $.ajax({
        type        : 'GET',
        url         : 'http://test.XXXXXXX.com/x/x/x/x/x/x/.action?source=182081&firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,
        dataType    : 'json',
        success: function(data){
    alert('successful');
  }

    })
        .done(function(data) {

            console.log(data); 

        });

    event.preventDefault();


    $('#banner-expanded').hide();
    $('#container1').hide();
    $('#thankyou').show();


});

The two main questions I have..

1) Is the ajax call structured properly? should i take the URL and Data and break them up like so?

        url         : 'http://test.XXXXXXX.com/api/event/form/optinNational.action?source=182081&
                    data            : firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,

2) Besides the "alert" and "console.log" I put, is there any other way to see if the call is successful?

I created a jsfiddle here http://jsfiddle.net/33snB/5/

thanks in advance

Hey there, make sure to strip-out the real domain in your fiddle ajax call! — Foo, May 15 '14 at 15:26

score 1 · Accepted Answer · answered May 15 '14 at 15:30

1

You are doing way too much manual labor here. This will do the same work:

var url =  'http://test.XXXXXXX.com/api/event/form/optinNational.action';
$.ajax({
    type        : 'GET',
    url         :  url,
    data: $('#target').serialize(),
    dataType    : 'json',
    success: function(data){
        alert('successful');
    }
});

And yes, its in the success callback you get your result back and know the call worked. Errors result in thecallback error.

answered May 15 '14 at 15:30

Mattias Åslund

3,877
2
18
17

Mattias, what if i need to incorporate the 'source=######' ? can i identify the source even though i used the 'serialize' function? – chrismillah May 19 '14 at 19:06
serialize() just creates a string, so you can append/prepend anything you like. Another approach is to add it to the end of the url. My preference is to add a hidden input to the form though, and set its value prior to calling serialize(). – Mattias Åslund May 19 '14 at 20:24
You could add `contentType: 'text/json'` and `data: JSON.stringify($('#target'))` to your structure in $.ajax({}) if you want to pass it through as JSON. – Sometowngeek Apr 03 '17 at 15:33

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Try it like this:

data : {
    source: 182081
    firstName: firstName,
    lastName: lastName,
    email: email,
    zip: zip,
},
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

or trim it down to just:

data : $('#target').serialize()
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

Resource: Submit form using AJAX and jQuery

edited May 23 '17 at 12:14

Community

1
1

answered May 15 '14 at 15:25

viion

365
2
10

score 0 · Answer 3 · edited May 15 '14 at 15:32

0

why dont you use jquery's $,.get or $.post request.

simply for checking press ctrl+I and in developers mode look for networks tab. There all requests made to server will be found.

$.get(url,{
 firstname : firstname,
 lastname : lastname
 ...
 //etc all values here

},function(data){

  //callback sucess

},'json');

edited May 15 '14 at 15:32

Foo

158
8

answered May 15 '14 at 15:27

HackerManiac

243
1
4
20

score 0 · Answer 4 · answered May 15 '14 at 15:28

You can use the jQuery serialize function to help you out here. Something like this will work:

$('#target').submit(function(event) {
    event.preventDefault();
    var data = $('form').serialize();
    $.get('url', data, function(data){
        alert('successful');
        console.log(data);
        $('#banner-expanded').hide();
        $('#container1').hide();
        $('#thankyou').show();
    });
});

score 0 · Answer 5 · edited Jun 21 '15 at 21:00

0

values should be sent using data but your syntax is wrong.

data: { firstName: firstName, lastName: lastName, email: email, zip:zip },

Firebug, a Firefox add on is an excellent tool to see post/get calls to the server and the data returned. Very useful for debugging. Chrome and IE have similar but I find Firefox with firebug the most useful.

edited Jun 21 '15 at 21:00

TessellatingHeckler

27,511
4
48
87

answered May 15 '14 at 15:29

user1628449

375
1
3
16

Proper AJAX GET structure using JQUERY

5 Answers5