simple javascript AJAX post function not working

Question

Hi I want to send data to the server and then have the php file save it. But currently I can't get even a simple POST to work.

This is the javascript and html part: This function is declared in the head:

function sendTableToServer(){
    var xhttp;
    if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    } else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhttp.open("POST","http://music.collwyncraig.info/hajimama/save_setlist.php",true);
    xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhttp.send("fsong=AbandonSeoul");
}

Then this html is in the body:

<button type="button" onclick="sendTableToServer()">Save Setlist</button>

This is the php file

<?php
if (isset($_POST["fsong"])){
    echo 'trying';
    $song = $_POST["fsong"]; 
    echo $song;
    echo 'ok';
}
?>

When I click the button, nothing happens. If I use a <form> and a submit button, the php file is loaded by the browser, and I can access the input. However, I want to use a function like this because the information I want to send is going to be taken out of the html page using javascript and HTML DOM. So, why doesn't anything happen? :)

Where is your callback for XHTTP?

neoascetic
– neoascetic

2012-04-07 04:59:16 +00:00
Commented Apr 7, 2012 at 4:59 — neoascetic
– neoascetic, Commented Apr 7, 2012 at 4:59
Ever thought of using jQuery?

Fred
– Fred

2012-04-07 05:01:07 +00:00
Commented Apr 7, 2012 at 5:01 — Fred
– Fred, Commented Apr 7, 2012 at 5:01

icktoofay · Accepted Answer · 2012-04-07 05:29:27Z

1

If you want the same behavior as a form except you want to get data from the page, just create a form and submit it:

var form = document.createElement('form');
form.action = 'http://www.example.com/do-something';
form.method = 'post';
var song = document.createElement('input');
song.type = 'hidden';
song.name = 'song';
song.value = 'Song Name';
form.appendChild(song);
form.submit();

edited Apr 7, 2012 at 5:29

answered Apr 7, 2012 at 5:05

icktoofay

130k23 gold badges261 silver badges239 bronze badges

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

8 Comments

Visionary Software Solutions Over a year ago

This causes a postback. The whole reason to use AJAX is to avoid this. Why wouldya propose this?

icktoofay Over a year ago

@Visionary: My interpretation of the question was they wanted to replace the whole page as if it was submitted via a form, but they wanted to use AJAX because they needed data dynamically calculated.

jamesmortensen Over a year ago

Just use return false in the onSubmit event, or event.preventDefault to stop the page from reloading. That one missing detail shouldn't detract from the main idea of this solution. +1

icktoofay Over a year ago

@jmort253: Both of those solutions will prevent the data from getting sent to the server, making it pointless. However, setting the form's target to an iframe would do it. (although if that's what you want, might as well use AJAX (correctly))

jamesmortensen Over a year ago

@icktoofay - I'm using this technique successfully with the form onclick event. From what I understand it should work with onsubmit as well. Feel free to rollback my edit if you know that to be incorrect.

|

COLD TOLD · Accepted Answer · 2012-04-07 06:13:37Z

1

If you do not want to use jQuery ajax, try using pure ajax:

<html>
    <head>
    <script type="text/javascript">
    sendTableToServer()
    {

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
        else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","http://music.collwyncraig.info/hajimama/save_setlist.php?fsong=AbandonSeoul", true);
    xmlhttp.send();
    }
    </script>


<?php
if (isset($_GET["fsong"])){
    echo 'trying';
    $song = $_GET["fsong"]; 
    echo $song;
    echo 'ok';
}
?>

Source: http://www.w3schools.com/php/php_ajax_php.asp

edited Apr 7, 2012 at 6:13

answered Apr 7, 2012 at 5:04

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

3 Comments

Gary Over a year ago

THERE'S NO NEED TO SHOUT!</capslock>

neoascetic Over a year ago

@Gary Look at his nickname :)

collwyn Over a year ago

this seems close to what I had except using GET instead of POST. and am I correct that you missed writing in the name of the .php file in the xmlhttp.open() method?

jamesmortensen · Accepted Answer · 2012-04-07 05:06:59Z

0

If you're making a POST to a domain that isn't the same as what is in your address bar, it will fail. You cannot make cross-domain AJAX requests:

xhttp.open("POST","http://music.collwyncraig.info/hajimama/save_setlist.php",true);

Try removing the scheme and domain:

xhttp.open("POST","/hajimama/save_setlist.php",true);

This will make the POST request relative to the current domain as the http and domain are not needed here.

answered Apr 7, 2012 at 5:06

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

1 Comment

collwyn Over a year ago

ah yah. actually it's the same domain, i just had written the full URL to check that using only the file name wasn't the problem. thanks.

Visionary Software Solutions · Accepted Answer · 2012-04-07 05:14:00Z

0

Remember that AJAX is by nature asynchronous. You should be defining callbacks for completion and error conditions, as your data will not return right away. You may want to follow this Google tutorial on AJAX. JQuery does simplify the process, if available.

If your only goal is to send data to the server to write to a file, you don't need AJAX or Javascript. Just set the <form action="http://music.collwyncraig.info/hajimama/save_setlist.php"> and put the data you want to send to the server in the form tags. The only reason to use Javascript for AJAX is for "nicer behavior", which may be more complex than the simple usage you are looking for.

edited Apr 7, 2012 at 5:14

answered Apr 7, 2012 at 5:05

Visionary Software Solutions

3,8472 gold badges32 silver badges35 bronze badges

Collectives™ on Stack Overflow

simple javascript AJAX post function not working

4 Answers 4

8 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related