ionfish
ionfish

Reputation: 171

How do I send and receive vars with jquery and AJAX?

so lets say this is my jquery portion of the code:

$.ajaxSetup ({
    cache: false
});

load() functions
var loadUrl = "load.php";
$("#load_basic").click(function(){
    $("#result").load(loadUrl +  "?language=php&version=5");
});

});    

and this is "load.php"

<?php $_GET['language'] .= "cool";  $_GET['version']+=2; ?>

How do I return the processed language and version vars back to my #result div?

Sorry if I'm doing this wrong. Pretty comfortable in php and jquery, but ajax sort of confuses me and I haven't found any tutorials that really clicked.

I know I can echo these vars out, and that will return the contents of load.php into my div.. but that seems clunky, and I doubt that's the way people actually do it..

Upvotes: 0

Views: 258

Answers (3)

jfrubiom
jfrubiom

Reputation: 141

try

$.ajax({
  url:YOUR_URL,
  dataType:'json',
  type:'POST',
  data:'&var1=value1&var2=value2',
  beforeSend:function(){
      //
  },
  success:function(response){
      //complete
      $('#container').html(response.result + ' ' + response.other);
  }
});

in your php

$var1 = $_POST['var1'];
//your proccess
$result = array(
   'result' => 'ok',
   'other' => 'value'
);
echo json_encode($result);

Upvotes: 1

mikeY
mikeY

Reputation: 519

" What If I'm echoing out two or three vars in php, and I want them to be seperated and echoed out to different divs.. "

I'm ASP and not PHP but I think the prinicple is the same.

I have this is my requesting page:


    <script type="text/javascript">
     $(document).ready(function(){  
$("#list").change(onSelectChange);  
});

    function onSelectChange(){  
var selected = $("#list option:selected").val();
var bob = $("#list option:selected").text();

if (selected.length > 0) {
    $.post("twopart.asp", { thing: selected, bob: bob }, function(data) {
        var dataraw= data;
        var dataarray = (dataraw).split("~~~");
        var outone= dataarray["0"];
        var outtwo= dataarray["1"];
        var outthree= dataarray["2"];
        $("#output1").html(outone);
        $("#output2").html(outtwo);
        $("#output3").html(outthree);
    });
}
}
</script>

and this is in my processing page:


response.write bunch of stuff and ~~~
response.write bunch of stuff and ~~~
response.write more stuff

Sorry is the formatting is off- still learning how to do it.

Anyway, the "echoing page" echos its content with the three tildes stuck in there. Then I parse the return on the tildes and write different places.

Hope this is helpful.

The JSON answer by Grooveek is probably better.

Upvotes: 1

Grooveek
Grooveek

Reputation: 10094

JQuery

$("#load_basic").click(function(){
    $.get(loadUrl +  "?language=php&version=5", function(data){
           var obj = eval(data)
           $("#result").html(obj.language + " " + obj.version)      
    });
});

PHP

<?php $_GET['language'] .= "cool";  $_GET['version']+=2; 
echo "{\"language\" : \"".$_GET['language']."\",\"version\" : \"".$_GET['version']."\"" ?>

not tested and not bullet-proof, but the concept is here. Return somthing in your PHP that you can read back (i choose JSON)

Upvotes: 1

Related Questions