如何使用Ajax

Question

i hope someone can help me with this problem

i have a logic problem in code to solve

i have a value in jquery in like this

$(".test").click(function(){
var category=$(this).attr("data-id");
}

data-id value is 1

php codes (test.php)

function test()
{
$newdata=data-id + data-id;
return newdata;
}
echo test();

i need the code to call the data-id value from first jquery to put in the test() function

and the last , i need to put the echo -ed newdata value after the php function calculate the value to put it inside .test div with this second jquery

$("li").click(function(){
$('.test').text(data-id);
}

i need the complete step to step code for this problem , thanks for notice and helping! , sorry for bad english

Answer 1

You have several things here, the server processes the page (php) and sends it to the client. In order to get the client altered content back to the server (php) for processing, you would use ajax.

First you need to get the value from your field provided by the client which you are already doing with:

$(".test").click(function(){
  var category=$(this).attr("data-id");
}

Now, once you have that value, you need to pass it to your PHP page. To do this, we use ajax, you will need to alter your click function:

$(".test").click(function(){

  var testDiv = $(this);

  //get the category value
  var category = testDiv.attr("data-id");

  //pass the category value to your php page
  $.ajax({
    url: 'test.php',
    method: 'POST',
    data: 'category='+category,
    success: function(returnedData) 
    {
    }
  });

});

You can now access the $_POST variable in your PHP function:

//within test.php
function test()
{
  $newdata=$_POST['category'] + $_POST['category'];
  return $newdata;
}
echo test();
//if category was 1, this would echo 2 (as 1 + 1 = 2)

The last step is to put the returned value into your "test" div that was clicked:

//to place the returned data from test.php
//alter your .test click function
$(".test").click(function(){

  var testDiv = $(this);

  //get the category value
  var category = testDiv.attr("data-id");

  //pass the category value to your php page
  $.ajax({
    url: 'test.php',
    method: 'POST',
    data: 'category='+category,
    success: function(returnedData) 
    {
      //repopulate the clicked div with the returned data
      testDiv.html(returnedData);
    }
  });

});