Attempting to transmit a text message to a PHP script using Ajax

Question

Attempting to transmit a text message to a PHP script using Ajax

Hey there! I'm facing a challenge while trying to send a string to a PHP file using AJAX. It seems like the http.send function is not working as expected, and I suspect there might be an issue in my code. (I'm fairly new to programming)

 mainlink= 'a link';
 id= 'an id';
 $(document).click(function(){
   var http = new XMLHttpRequest();
   var link = mainlink+id;
   http.open("POST", 'test.php', true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.onload = function(){
     if(this.status == 200) {
       console.log (link);
     }
   }
   http.send("link="+link);
 });

test.php:

<?php 
if (isset($_POST['link'])){
echo $_POST['link'];
} else{echo "error";}
?>

I have attempted using both GET and POST methods.

javascript ajax

Answer 1

Answer №1

Yes, this solution is effective. Are you utilizing jQuery as a source? Simply insert the following code snippet within the head section of your webpage:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

It would be advisable to console log this.responseText instead of link in order to capture the server's response accurately. Here is the precise code implementation I employed for successful execution:

HTML:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
                var mainlink = 'a link';
                var id = 'an id';
                $(document).click(function(){
                    var http = new XMLHttpRequest();
                    var link = mainlink + id;
                    http.open("POST", 'test.php', true);
                    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    http.onload = function(){
                        if (this.status == 200){
                            console.log(this.responseText);
                        }
                    }
                    http.send("link=" + link);
                });
        </script>
    </head>
</html>

PHP:

<?php 
    if(isset($_POST['link'])){
        echo $_POST['link'];
    }
    else{
        echo "error";
    }
?>

To witness the functionality firsthand, visit this link. Ensure that the pathname for test.php is correctly specified.

Answer 2

Yes, this solution is effective. Are you utilizing jQuery as a source? Simply insert the following code snippet within the head section of your webpage:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

It would be advisable to console log this.responseText instead of link in order to capture the server's response accurately. Here is the precise code implementation I employed for successful execution:

HTML:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
                var mainlink = 'a link';
                var id = 'an id';
                $(document).click(function(){
                    var http = new XMLHttpRequest();
                    var link = mainlink + id;
                    http.open("POST", 'test.php', true);
                    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    http.onload = function(){
                        if (this.status == 200){
                            console.log(this.responseText);
                        }
                    }
                    http.send("link=" + link);
                });
        </script>
    </head>
</html>

PHP:

<?php 
    if(isset($_POST['link'])){
        echo $_POST['link'];
    }
    else{
        echo "error";
    }
?>

To witness the functionality firsthand, visit this link. Ensure that the pathname for test.php is correctly specified.

Attempting to transmit a text message to a PHP script using Ajax

Answer №1

Similar questions

Having trouble with window.setInterval in AngularJS?

Sinatra application encounters internal server error resulting in AJAX request failure

What is causing my basic angularjs to not function properly?

Unusual $http Angular.js POST inquiry

Secure HyperText Transfer Protocol prevents JavaScript from executing

Finding it challenging to retrieve the dynamically generated data from the PHP-MYSQL combination through jQuery AJAX

The declaration of 'exports' is not recognized within the ES module scope

Unable to track user (Mineflayer - Node.js)

Is there a way to hide a button on this virtual keyboard after it has been clicked?

Challenges Encountered When Working with React.useState()

Exploring Recursive Types in TypeScript

Unable to integrate multiple webpack projects: Uncaught SyntaxError occurs due to a missing closing parenthesis after the argument list

Send an array to Spring's controller using AJAX

Performing a task after a process has finished

Verify the position of the scrollbar without triggering any reflow

A more efficient approach to creating a personalized design

Working with Angular's forEach method and handling null values

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Toggle the visibility of table rows using checkboxes

Discovering the art of line breaks