11

I'm trying to post data to a PHP page and check the response. Here is an example. What is wrong with this code?

index.html

<html>
<head>
    <title>Post Ajax</title>
    <script type="text/javascript">
        function post(foo, bar) {
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }

            xmlhttp.open("POST", "ajax.php", true);
            xmlhttp.send("foo=" + foo + "&bar=" + bar);
        }
    </script>
</head>
<body>
    <input type="button" value="Click me" onclick="post('one','two');" />
</body>
</html>

ajax.php

<?php
if (array_key_exists('foo', $_POST) && array_key_exists('bar', $_POST)) {

    $foo = $_POST['foo'];
    $bar = ($_POST['bar']);
    // do stuff with params

    echo 'Yes, it works!';

} else {
    echo 'Invalid parameters!';
}
?>

Either I have a stupid typo or I am not using the send() method correctly.

styfle
  • 22,361
  • 27
  • 86
  • 128

1 Answers1

28

I figured it out. I needed to set the request header.

xmlhttp.open("POST", "ajax.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("foo=" + foo + "&bar=" + bar);

source1

source2

Community
  • 1
  • 1
styfle
  • 22,361
  • 27
  • 86
  • 128