Put JSON in a variable

Question

I have a hard time with $.ajax(). I have this HTML page :

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <form name="gettr" id="gettr">
         <input type="hidden" name="lang" value="ro">
         <input type="text" name="tickkey" id="tickkey" value="">
         <br>
         <input type="submit" value="Send" id="submit">
         <input type="reset" value="Cancel" onclick="$(&quot;#hereinfo&quot;).html(&quot;&quot;);">
        </form>
    </body>
</html>

And the script :

$("#gettr").submit(function() {

    var url = "handler.php"; 

    $.ajax({
           type: "GET",
           url: url,
           dataType: "application/json",
           data: $("#gettr").serialize(), // serializes the form's elements.
           success: function(data) {
               alert('Done');
           }
         });

    return false; 
});

I'm running the script locally now, and my problem is that the script doesn't do anything.When I click on send button it just adds ?lang=ro&tickkey=value_inputed_in_the_form at the end of the url in the address bar.What should I do so I can store the JSON returned by the server in a variable?

Thank you!

I already have type:"GET" in $.ajax(). Do I need to set it in the HTML too? — Daniel Bejan, Jan 24 '14 at 14:38
@DannyBejan It does work without the method attribute. But i don't know is it best practice or not but it would be nice to ask it as new question. Looks interesting. — Rahil Wazir, Jan 24 '14 at 14:45

score 7 · Accepted Answer · edited May 23 '17 at 10:28

7

I think the reason your query variables are appending to url is because you're executing your script before the DOM loads. You should wrap your script within $(document).ready(function () { }); handler.

Use event.preventDefault() instead of return false;. But Why not return false; see here

$(document).ready(function () { //Let the DOM be loaded

   $("#gettr").submit(function(event) {
    event.preventDefault(); //Prevent window default behaviour

    var url = "handler.php"; 

    $.ajax({
           type: "GET",
           url: url,
           dataType: "application/json",
           data: $("#gettr").serialize(), // serializes the form's elements.
           success: function(data) {
               alert(data);               //Alert your json data from server
           }
         });
    });
    //remember remove return false; because you're already preventing default behaviour
});

edited May 23 '17 at 10:28

Community

1
1

answered Jan 24 '14 at 14:32

Rahil Wazir

10,007
11
42
64

I have a bit of a problem.The "handler.php" is on another domain and I get this : "XMLHttpRequest cannot load http://www.that_domain.ro/handler.php?lang=ro&tickkey=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. I found this, but I don't know how to modify it so I can use It.Can you help? http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w – Daniel Bejan Jan 24 '14 at 14:53
1

@DannyBejan Ofcourse this not possible because of security reason you're making request to other domain instead of your so this is not allow with javasript though. You can work out this with [cURL](http://php.net/curl) php function. Make the call with ajax to your php file where curl lives (this should be in your domain) and then curl will request to other domain. Hope it give some idea. There is also a nice tutorial to exact problem of your [here](http://www.paulund.co.uk/make-cross-domain-ajax-calls-with-jquery-and-php) – Rahil Wazir Jan 24 '14 at 15:12

score 4 · Answer 2 · edited Jan 24 '14 at 15:15

Ensure that the DOM is ready and prevent the form submission before executing the AJAX request.

var dataFromServer = {};

// Document ready.
$(function() {

    $( '#gettr' ).on( 'submit', function( event ) {

        // Prevent form submission.
        event.preventDefault();            

        // AJAX request.
        var url = 'handler.php'; 
        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'application/json',
           data: $( '#gettr' ).serialize(),
           success: function( data ) {               
                dataFromServer  = data;
           }
        });
    });

});

I took everything in the function down so the script is shorter. — Daniel Bejan, Jan 24 '14 at 14:22

score 4 · Answer 3 · answered Jan 24 '14 at 14:22

4

Try to call preventDefault();

$("#gettr").submit(function(event) {
    event.preventDefault();

answered Jan 24 '14 at 14:22

Maurice Perry

32,610
9
70
97

Put JSON in a variable

3 Answers3