Sending data from JavaScript to PHP via XMLHttpRequest

Question

Good day.

I'm trying to send a simple piece of data from one php file (manage.php) to another (view.php).

I cannot send the data via a form, I want to send it via a JS script. Here's my attempt:

var read = function(id) {
  xmlhttp = new XMLHttpRequest();

  xmlhttp.open("POST", "view.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("id=" + id);
}

In view.php, using $_POST["id"] causes an error stating that the index "id" is undefined.

What's the correct way to send the data? Thank you.

use for example only jquery and dont mix Xhhtp and ajax for wat you want make life difficult. — user7601056
– user7601056, Commented Mar 29, 2017 at 16:16
@Breakermind jQuery is a lot of overhead if all you need to do is make an AJAX request. — doublesharp
– doublesharp, Commented Mar 29, 2017 at 16:17

MGZ · Accepted Answer · 2017-05-17 12:42:51Z

10

Your input is not complete. So I did the full example below that you can follow. I made a function, named readid(id), doing the same thing as you want. Then I call that function from html, when needed.

<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function readid(id){
"use strict";   
console.log("id=", id)
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/cgi-bin/view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 || this.status === 200){ 
        console.log(this.responseText); // echo from php
    }       
};
xmlhttp.send("id=" + id);
}
</script>
</head>
<body>
<p>This is a test</p>
<input type="button" name="Submit" value="Submit" id="formsubmit" onClick="readid(id)">
</body>
</html>

view.php

<?php
$logFile = "view.log";
$id = $_POST['id'];
file_put_contents($logFile, $id);
echo $id;
?>

answered May 17, 2017 at 12:42

MGZ

1419 bronze badges

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

1 Comment

Zeeshan Mehdi Over a year ago

it worked var ajax = new XMLHttpRequest(); ajax.onload= success; ajax.onerror = failure; ajax.open("POST", "handle.php", true); ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); let data = 'name='+'zeeshan'; ajax.send(data); function success() { if(this.status===200) document.getElementById('demo').innerText = this.responseText; } function failure(exception) { document.getElementById('demo').innerText = exception; }

Vaishal Patel · Accepted Answer · 2017-03-29 16:26:03Z

-1

        <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form id="formoid" title="" method="post">
            <div>
                <label class="title">First Name</label>
                <input type="text" id="name" name="name" >
            </div>
            <div>
                <label class="title">Name</label>
                <input type="text" id="name2" name="name2" >
            </div>
            <div>
                <input type="submit" id="submitButton"  name="submitButton" value="Submit">
            </div>
     </form>
    <script type='text/javascript'>
        /* attach a submit handler to the form */
        $("#formoid").submit(function(event) {

          /* stop form from submitting normally */
          event.preventDefault();

          $.ajax({
    type: 'POST',
    data: id,
    url: 'PATH_TO_VIEW.PHP',                        
    success: function(data) {
        //do something 
    },
    error: function(data){
        console.log('Something went wrong.');
    }
});
        });
    </script>

    </body>
    </html>

Now the data in ajax can be collected numerous e.g. serialized and new FormData(form) to quickly name two.

edited Mar 29, 2017 at 16:26

answered Mar 29, 2017 at 16:18

Vaishal Patel

4395 silver badges24 bronze badges

1 Comment

doublesharp Over a year ago

This uses jQuery which is not related to the question regarding XMLHttpRequest.

Collectives™ on Stack Overflow

Sending data from JavaScript to PHP via XMLHttpRequest

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related