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
– Foo, Commented May 15, 2014 at 15:26

Mattias Åslund · Accepted Answer · 2014-05-15 15:30:48Z

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, 2014 at 15:30

Mattias Åslund

3,9252 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chrismillah Over a year ago

Mattias, what if i need to incorporate the 'source=######' ? can i identify the source even though i used the 'serialize' function?

Mattias Åslund Over a year ago

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().

Sometowngeek Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:14:30Z

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, 2017 at 12:14

CommunityBot

11 silver badge

answered May 15, 2014 at 15:25

viion

3582 silver badges10 bronze badges

Comments

edcs · Accepted Answer · 2014-05-15 15:28:27Z

0

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();
    });
});

answered May 15, 2014 at 15:28

edcs

3,8892 gold badges37 silver badges56 bronze badges

Comments

Foo · Accepted Answer · 2014-05-15 15:32:21Z

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, 2014 at 15:32

Foo

1588 bronze badges

answered May 15, 2014 at 15:27

HackerManiac

2431 gold badge4 silver badges20 bronze badges

Comments

TessellatingHeckler · Accepted Answer · 2015-06-21 21:00:10Z

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, 2015 at 21:00

TessellatingHeckler

29.3k4 gold badges55 silver badges96 bronze badges

answered May 15, 2014 at 15:29

user1628449

3851 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

Proper AJAX GET structure using JQUERY

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related