Insert a variable into data attribute, AJAX

Question

I'm pretty sure this has a simple solution that I'm missing. I have the following ajax script.

<!DOCTYPE html>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function postForm() {
    var ret = $('#test').val();
    $.ajax({
            type: 'POST',
            url: 'http://10.0.0.8:9000/demo',
            data: '{"name" : '+ret'}',
            contentType: "application/json; charset=utf-8",

        })
    }

</script>
</head>
<body>
    <form id="ajaxForm" onSubmit="postForm(); return false;"  method="post"> 
        <input id="test" type="text" name="name" value="Hello JSON" /> 
        <input type="submit" value="Submit JSON" /> 
    </form>

</body>
</html>

I've pulled the value of the input with id='test' put it in the ret variable. Then I'm trying to insert it into the data attribute and send it via ajax. I've tried various assortments of quotes and nothing seems to be working.... what am I doing wrong?

Thanks ahead

You shouldn't pass data parameter as a string. Just data : { name : ret }. — tomsseisums
– tomsseisums, Commented Mar 17, 2013 at 13:01
@psycketom, that's not true is you want to send JSON data (which seems to be the case here because the OP has set the contentType request header to application/json). The thing that's wrong is that he built this JSON manually using string concatenations instead of using the JSON.stringify method as shown in my answer below. — Darin Dimitrov
– Darin Dimitrov, Commented Mar 17, 2013 at 13:03

Darin Dimitrov · Accepted Answer · 2013-03-17 13:05:47Z

You seem to have specified an absolute url for your AJAX script:

http://10.0.0.8:9000/demo

It seems that you are violating the same origin policy that is built into browsers and which is preventing you from sending cross domain AJAX calls.

So this AJAX call cannot work unless this HTML page is hosted on http://10.0.0.8:9000.

Also you seem to have a trailing , which results into invalid javascript. I'd also use the JSON.stringify method to properly serialize the request to JSON:

function postForm() {
    var ret = $('#test').val();
    $.ajax({
        type: 'POST',
        url: '/demo',
        data: JSON.stringify({ name: ret }),
        contentType: 'application/json; charset=utf-8',
        success: function(result) {
            // do something iwth the result of the AJAX call here
        }
    });
}

Notice how I have used a relative path here (url: '/demo') to ensure that the same origin policy is not violated and ensure that the AJAX request is sent to the same domain.

If on the other hand you need to send cross domain AJAX calls then you have a couple of possibilities including using JSONP (limited only to GET requests) or CORS both involving modifications to your server side API. If you have no control over your server side API and cannot modify it, you will have to write a server side script on your domain (the one hosting your HTML page containing this javascript) that will act as a bridge/proxy between your domain and the remote domain and then send the AJAX request to your server side script.

Collectives™ on Stack Overflow

Insert a variable into data attribute, AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related