CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
iscattered
iscattered

Reputation: 103

Echoing to the screen using AJAX PHP

I'm trying to write a short ajax code to echo the word 'hello' to the screen, but so far I'm not having any luck. If anyone know what I'm doing wrong, please correct me, and let me know. Thank you.

test6.html

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

<script type = "text/javascript"> 

function myAjax() {
      $.ajax({
           type: "POST",
           url: 'testing.php',
           data:{action:'call_this'},
           error: function(xhr,status,error){alert(error);},
           success:function(html) {
             alert(html);
           }

      });
}

</script>

<a href="#" onclick="myAjax()">echo hello</a>

testing.php

<?php

if($_POST['action'] == 'call_this') {
  echo "hello";
}

?>

Upvotes: 1

Views: 174

Answers (2)

Mike
Mike

Reputation: 24363

You have two problems. First, you have a syntax error. You need a comma after error:

function myAjax() {
      $.ajax({
           type: "POST",
           url: 'testing.php',
           data:{action:'call_this'},
           error: function(xhr,status,error){alert(error);} /* this comma --> */ , 
           success:function(html) {
             alert(html);
           }

      });
}

Second, since you are using an anchor (<a>) tag, when you click on the tag it follows the link. You have to prevent that from happening. You can:

  • Not use an <a> tag
  • Put a href to something like # or javascript:void(0)
  • Make the function it calls return false
  • Use event.preventDefault

See it on JSFiddle

Edit:

On a side note, you may prefer to just use JavaScript to bind the event handler. This way you get a further separation of JS and HTML, which is typically preferred. Something like this should work:

$("#sendAjax").click(function(event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        data:{html:'call_this'},
        error: function(xhr,status,error){alert(error);},
        success:function(html) {
            console.log(html);
            $("#result").text(html);
        }
    });
});

Then in your HTML you don't need the onclick handler:

<a href="#" id="sendAjax">echo hello</a>

See it on JSFiddle

Upvotes: 2

Jose Manuel Abarca Rodr&#237;guez
Jose Manuel Abarca Rodr&#237;guez

Reputation: 10371

I made some little changes to your code, like adding quotes for 'action', and creating a button because <A HREF has some issues with click event (buttons don't have those issues), here it is, now it works to me, let me know if it works to you too :

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
function myAjax () {
$.ajax( { type : 'POST',
          data : {'action':'call_this'},
          url  : 'testing.php',
          success: function ( data ) {
            document.getElementById( "my_div" ).innerHTML = data;
          },
          error: function ( xhr ) {
            alert( "error" );
          }
        });
}
    </script>
  </head>
  <body>
    <a href="" onclick="myAjax()">echo hello</a>
    <br/><br/>
    <button onclick="myAjax()">echo hello</button>
    <br/><br/>
    <div id="my_div"></div>
  </body>
</html>

Upvotes: 2

Related Questions