Sending Information to a PHP Script using Ajax

Question

I would like to send an ajax command to a php script each time when a button is clicked. The divs are called r, l, t, b for the different directions. So far I have tried using the code below. But somehow it doesn't work. I have not a lot of experience in jquery and that's why I am asking here for a simple solution. I could write 4 times the same function but this is certainly not what I am looking for.

$(document).ready(function(){

function control(id){
    $.ajax({
        type: "POST",
        url: "control.php",
        data: {id: "1"},
        success:  function(data){
            alert(data);
        }
    });
}

$('#r').mousedown(function(){
    control($(this).attr('id'));
});

});

Does your php not catch it? Does the AJAX call fire? Have you put an {error:function(){}} into the ajax call to see if it actually was being fired? — Fallenreaper
– Fallenreaper, Commented Jul 1, 2014 at 11:17

Kylie · Accepted Answer · 2014-07-01 11:27:41Z

3

Well first...

Just give all your divs a class

 <div id="r" class="direction"></div>
  <div id="l" class="direction"></div>
    <div id="t" class="direction"></div>
      <div id="b" class="direction"></div>

Then rewrite your jquery

$(document).ready(function(){
      $('.direction').mousedown(function(){
          $.post("control.php",{id: $(this).attr('id')},function(msg){
               alert(msg);
          });
      });
  });

If you happen to be receiving JSON from the servers.... You must specify the dataType as 'json' or 'jsonp' for cross domain json and use $.ajax

function control(theid){
$.ajax({
    type: "POST",
    url: "control.php",
    data: {id: theid},
    dataType: 'json',
    success:  function(msg){
        alert(msg);
    }
});

}

Or if you wanna keep it simple like the above $.post example.....use getJSON

   $(document).ready(function(){
      $('.direction').mousedown(function(){
          $.getJSON("control.php",{id: $(this).attr('id')},function(msg){
               alert(msg);
          });
      });
  });

edited Jul 1, 2014 at 11:27

answered Jul 1, 2014 at 11:22

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

r3wt Over a year ago

This was a very good answer as well, and its even better because you bind the event to a class instead of multiple id's. my answer works, but in my opinion this was the proper answer.

KatieK · Accepted Answer · 2014-07-01 21:52:58Z

2

It's hard to know exactly what you are asking, but basically you want a multipurpose click event for multiple divs.

in jQuery, you can add multiple selectors by separating the selectors with commas like so:

$('#id, .class, element')

Here is an example that uses less code to provide the same functionality, if I understood your question correctly.

$(function(){
    $('#r,#l,#t,#b').mousedown(function(){
        $.post('control.php',{id: $(this).attr('id')},function(data){
            //handle data callback
            alert(data);
        });
    });
});

I used $.post instead of $.ajax , but bear in mind if you use the simpler methods like post, get, or getJSON, you will not be able to assign an error callback as far as I'm aware. Hopefully this changes in future releases of jQuery.

edited Jul 1, 2014 at 21:52

KatieK

13.9k19 gold badges79 silver badges91 bronze badges

answered Jul 1, 2014 at 11:20

r3wt

4,7622 gold badges37 silver badges57 bronze badges

Comments

OptimusCrime · Accepted Answer · 2014-07-01 11:16:27Z

1

function control(my_id){
    $.ajax({
        type: "POST",
        url: "control.php",
        data: {id: my_id},
        success:  function(data){
            alert(data);
        }
    });
}

Using $_POST['id']; you should get the information you are looking for.

answered Jul 1, 2014 at 11:16

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

Collectives™ on Stack Overflow

Sending Information to a PHP Script using Ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related