CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Krishna Sarswat
Krishna Sarswat

Reputation: 117

Fetch Only PHP Response using AJAX

I am trying to transfer data using AJAX. I've got two files, one has PHP, HTML and another one has JS Code:

test.php:

<?php
  if($_SERVER["REQUEST_METHOD"] == "POST"){
    if(isset($_POST["txtField"])){
      echo "OK";
    }else{
      echo "NOT OK";
    }
  }

 ?>



<html>
  <head>
    <title>Test Ground</title>
    <script type="application/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script type="application/javascript" src="test.js"></script>
  </head>
  <body>
    <input type="text" id="txtField" />
    <input type="button" id="sendInput" value="Send" />
  </body>
</html>

test.js:

$(window).on("load", function(){
  $("#sendInput").on("click", sendInput);
});

function sendInput(){
  $.ajax({
    url: "test.php",
    method: "POST",
    data: {txtField: $("#txtField").val()}
  }).done(function(data){
    console.log(data);
  });
}

And everything works fine till i recieve response from PHP to JS. In console.log data shown also includes HTML code along with PHP response "OK". But I want just the PHP response, nothing else. I know i can fetch the whole data and remove everything under HTML tags or create a separate file for PHP, but is there anyway which directly returns just the response from PHP without creating separate PHP file.

Upvotes: 1

Views: 1483

Answers (3)

R3tep
R3tep

Reputation: 12864

You can use exit() function to get the correct return :

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST["txtField"])) {
      echo "OK";
      exit();
    } else {
      echo "NOT OK";
    }
  }

When you send an Ajax call, the server return all the printed value on your file. So the HTML is printed too. Like that, you print only 'OK' because exit() stops the execution file, and only OK is printed.

Note, it's more appropriate to use a separate PHP file and HTML file, when you use AJAX.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

You need 2 php file one for the ajax and one for the page that sends the ajax, if you want to stick with one php page try this code:

<?php
  if($_SERVER["REQUEST_METHOD"] == "POST"){
    if(isset($_POST["txtField"])){
      echo "OK";
    }else{
      echo "NOT OK";
    }
  } else {

 ?>



<html>
  <head>
    <title>Test Ground</title>
    <script type="application/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script type="application/javascript" src="test.js"></script>
  </head>
  <body>
    <input type="text" id="txtField" />
    <input type="button" id="sendInput" value="Send" />
  </body>
</html>

<?php }?>

Upvotes: 0

void
void

Reputation: 36703

Modify your PHP file like this:

<?php
  if($_SERVER["REQUEST_METHOD"] == "POST"){
    if(isset($_POST["txtField"])){
      echo "OK";
    }else{
      echo "NOT OK";
    }
  }

  // This is what i have added.
  if(isset($_GET["fromJS"]))
    die();
  // Till here, so if this GET param is set noting will come up further this.
 ?>



<html>
  <head>
    <title>Test Ground</title>
    <script type="application/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script type="application/javascript" src="test.js"></script>
  </head>
  <body>
    <input type="text" id="txtField" />
    <input type="button" id="sendInput" value="Send" />
  </body>
</html>

And make your AJAX call to test.php?fromJS=true

$(window).on("load", function(){
  $("#sendInput").on("click", sendInput);
});

function sendInput(){
  $.ajax({
    url: "test.php?fromJS=true",
    method: "POST",
    data: {txtField: $("#txtField").val()}
  }).done(function(data){
    console.log(data);
  });
}

Upvotes: 1

Related Questions