Passing an expression via ajax

JavaScript
1

Hi Fellow Developers!

Let me explain you my problem with a simple example:

I have 3 files. Index.html, script.js, ajax.php. The contents of these files are as follows:

index.html


<html>
<head>
<script src="jquery.js"></script>
<script src="script.js"></script>
<script>
   function addition(exp){

     alert( eval(exp) );

   }
</script>
</head>

<body>

</body>

</html

script.js


            $.ajax({
                url :  'ajax.php',
                dataType: 'script',
                type: 'post',
                success: function(data){

                 addition(data);

                }
            });

ajax.php


echo "5+10";
die;

What I want is based on the output of ajax.php file, the addition function should alert the number 15.

Can someone pls tell me what am I missing in above code?

Thanks

2

Nothing.
I just tried the above code on my PC and it works as expected (i.e. an alert popped up displaying the number 15).

I appreciate this is a bare-bones example.
Do you have anything going on on your page that might be interfering with this?

Edit: the only thing I did was add <php … ?>

3

Just an afterthought: if you are testing this locally, you do have some kind of server software running, don’t you? (as opposed to just opening the pages directly in your browser).

That’s caught me out quite often in the past.

4

HI

I noticed that it works if I change the content of ajax.php

From:


echo "5+10";
die;

To:


5+10

Anyone knows why? and yes i m using a webserver on my localhost.

5

ok i got the ans to my above ques, i had removed the php tags in ajax.php file.

also, what if I have something like this in the ajax.php file:


var d1 = new Date('March 17, 2013 09:22:06');
var d2 = new Date('March 20, 2013 22:52:43');
var d3 = new Date('April 09, 2013 12:57:51');
var d4 = new Date('April 17, 2013 18:03:27');
var d5 = new Date('April 18, 2013 00:04:55');
var d6 = new Date('April 22, 2013 21:29:20');
data = [{'value' : 15, 'date' : d1}, {'value' : 1, 'date' : d2}, {'value' : 5, 'date' : d3}, {'value' : 7, 'date' : d4}, 
{'value' : 4, 'date' : d5}, {'value' : 2, 'date' : d6}];

How do I get the value of data in the addition() function?

6

Hi there,

Well, let’s start with ajax.php. What you posted above is JavaScript, let’s convert it to PHP:

$d1 = new DateTime('March 17, 2013 09:22:06');
$d2 = new DateTime('March 20, 2013 22:52:43');
$d3 = new DateTime('April 09, 2013 12:57:51');
$d4 = new DateTime('April 17, 2013 18:03:27');
$d5 = new DateTime('April 18, 2013 00:04:55');
$d6 = new DateTime('April 22, 2013 21:29:20');

Then, one way to do what you want is to create an array containing all of the DateTime objects you have just created, encode it as JSON and send it back to your script:

$arr = array(1 => $d2, 2 => $d6, 4 => $d5, 5 => $d3, 7 => $d4, 15 => $d1);
echo json_encode($arr);

Then in script.js, change the data type accordingly:

dataType: 'json'

And in your addition() function you can access the JSON thus:

function addition(data){
  console.log(data);
}

outputs:

Object {1: Object, 2: Object, 4: Object, 5: Object, 7: Object, 15: Object}

You can access individual members of the array:

function addition(data){
  console.log(data[2]);
}

outputs:

Object {date: "2013-04-22 21:29:20", timezone_type: 3, timezone: "Europe/Berlin"}

And you can access individual properties of a member:

function addition(data){
  console.log(data[2].date);
}

outputs:

2013-04-22 21:29:20

I hope that helps.
Let me know if you have any more questions.

Just to be complete, here’s the code:

ajax.php

<?php
$d1 = new DateTime('March 17, 2013 09:22:06');
$d2 = new DateTime('March 20, 2013 22:52:43');
$d3 = new DateTime('April 09, 2013 12:57:51');
$d4 = new DateTime('April 17, 2013 18:03:27');
$d5 = new DateTime('April 18, 2013 00:04:55');
$d6 = new DateTime('April 22, 2013 21:29:20');

$arr = array(1 => $d2, 2 => $d6, 4 => $d5, 5 => $d3, 7 => $d4, 15 => $d1);
echo json_encode($arr);
?>

script.js

$.ajax({
  url :  'ajax.php',
  dataType: 'json',
  type: 'post',
  success: function(data){
    addition(data);
  }
});

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="script.js"></script>
    <script>
      function addition(data){
        console.log(data);
      }
    </script>
  </head>
  
  <body>
  <h1>Hi</h1>
  </body>
</html>
7

Excellent explanation Pullo!!!

I will try this when i reach home.

Thanks

8

No problemo!

I also wrote a simple tutorial on using jQuery/AJAX recently.
Maybe this will help or be of interest, too.