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

Combine the arrays to utilize ng-repeat

refresh data storage in PhoneGap

Utilizing jQuery for AJAX requests on a timed loop

Is there a way to verify if a checkbox has been checked?

Passing an unpredictable amount of parameters to react router in a dynamic way

Generate Material UI sidebar components that are positioned above all other components

Node.js command prompt claims that 'react is non-existent'

The Vue.js application is failing to toggle the integrated code

Display the data received from the client on the NodeJS server

Create additional object property and include in current object's properties dynamically

"Learn how to extract the image URL from the configuration file (config.json) within the assets folder, and then seamlessly display it within

How can I display components using Angular CLI 5 without any visual output?

Navigation bar theme toggle malfunctioning as anticipated

working with html data in a bootstrap modal using javascript

Jquery click event functioning on one page but malfunctioning on another

What is the reason for Firefox displaying the "excessive recursion" error message?

Executing a PHP function within the same file using AJAX: A step-by-step guide

Tips for successfully implementing Angular.js validation within the confines of a <form> element

Determine the hexadecimal color value by combining two different colors along with a specified percentage/position

Struggling with lag in MaterialUI TextFields? Discover tips for boosting performance with forms containing numerous inputs