Get data using POST and AJAX

Question

I'm trying to send some data in my server asynchronously using AJAX. I need to send the data using the POST method because the data sent are quite many characters and by using GET the created URL will be too big. Well that's not a problem, but for aesthetically reasons I would rather have small URLs. In order to do so I used the solution (question) explained here.

My Javascript code sending the data is:

   var code = "code=" + document.getElementById("code_area").value;
   xmlhttp.open("POST", "run_code.php", true);
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlhttp.send(code);

The above code is executed when I click a button, but then the URL changes to this: localhost/code.php?code=datadatadatadatadatadatadatadatadatadatadatadatadatadata which seems is no different of using GET instead (my URL has become quite big). I used POST, not GET but still data seems to get transmitted by the URL. Any ideas why is this happening?

ariel · Answer 1 · 2011-05-09T04:14:10.273

1

You could do that much more easily using jQuery.

$.post("run_code.php", { code: $("#code_area").val() });

Links:

edited May 09 '11 at 04:14

answered May 09 '11 at 03:57

ariel

15,620
12
61
73

@equality.. try with jquery. the 4 lines are reduced to 1. – ariel May 09 '11 at 04:02
Maybe the server is issuing a redirect and since you don't have a custom handler for the response, the browser execute the redirect. Have you tried in different browsers? – ariel May 09 '11 at 04:53
When you say "the URL changes to this" what you mean? – ariel May 09 '11 at 04:54

Atticus · Answer 2 · 2011-05-09T04:07:34.163

0

Way easier with jquery...

$.post( 'yoururlhere.com/phppage',
        {code:$("#code_area").val()},
        function(responseData){
            // responseData is the echo'd data set from your php page
        }, 'json'
);

the data within { } are the post K-V pairs

responseData is the dataset echo'd back from php

edited May 09 '11 at 04:07

answered May 09 '11 at 03:59

Atticus

6,585
10
35
57

score 0 · Accepted Answer · answered May 11 '11 at 13:54

0

The problem after all was that I was using a submit input field in my HTML page like this:

<input type="submit" />

which when used changed (refreshed) the URL.

By using:

<input type="button" />

the problem has been fixed.

answered May 11 '11 at 13:54

insumity

5,311
8
36
64

Get data using POST and AJAX

3 Answers3