Jquery ajax post via link

Question

I am trying to post via link. But I think there is a problem. I am not good at Javascript. I want to send attribute and show with div.

Here is my Code :

  <script type="text/javascript">
      $(document).ready(function() {
          $("#slidingProduct").click(function() {
              var aa = $(this).attr('urun_id');
              $.ajax({
                  url: "data.php",
                  dataType: "POST",
                  data: {
                      "number1": aa
                  },
                  success: function(json) {
                      $("#result").html(json.number1);
                  }
              });
          });
      });
  </script>
  <a href="#" id="slidingProduct" urun_id="apple">A</a>
  <a href="#" id="slidingProduct" urun_id="banana">B</a>
  <a href="#" id="slidingProduct" urun_id="orange">O</a>
  <div id="result"></div>

`dataType` should be just `type : "POST"`, and then `dataType: "JSON"` — adeneo, May 28 '15 at 09:01

score 0 · Answer 1 · answered May 28 '15 at 09:06

0

You can do something like this:

$(".slpd").on('click',function(){
      var aa = $(this).data('urun_id'); 
      var json={"number1":aa};
      $.ajax({
            url: "data.php", 
            type: "POST", 
            dataType:'JSON',
            data: JSON.stringify(json), 
            success: function(result){ 
                $("#result").html(result.number1); 
            }
      });
});

As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and some modifications in html - It's good to use data-* property of html5:

<a href="#" id="slidingProduct1" class="slpd" data-urun_id="apple">A</a>
<a href="#" id="slidingProduct2" class="slpd" data-urun_id="banana">B</a>
<a href="#" id="slidingProduct3" class="slpd" data-urun_id="orange">O</a>

answered May 28 '15 at 09:06

Guruprasad J Rao

29,410
14
101
200

it didnt work. i think i am doing mistake somewhere. actually i dont want to use JSON. – rapstar2004 May 28 '15 at 09:19
1

@rapstar2004. I think problem in your `data.php` please check it . It's working. – vamsikrishnamannem May 28 '15 at 09:35
Yea!! Check whether you are getting control there once your ajax call is executed!! – Guruprasad J Rao May 28 '15 at 09:47
@GuruprasadRao can you show me example for data.php? – rapstar2004 May 28 '15 at 11:41
@rapstar2004 am not that good at php. So I just can give you some links to continue with. **[Link 1](http://blog.teamtreehouse.com/beginners-guide-to-ajax-development-with-php)**, **[Link2](http://labs.jonsuh.com/jquery-ajax-php-json/)**, **[StackLink](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php)**. I think this are enough to get you started! – Guruprasad J Rao May 28 '15 at 11:45

Tushar · Answer 2 · 2015-05-28T09:17:11.487

$(document).ready(function() {
    $("a").on('click', function(e) {
        e.preventDefault(); // Stop redirection

        var aa = $(this).attr('urun_id');

        $.ajax({
            url: "data.php",
            type: "POST"
            dataType: "JSON",
            data: {
                "number1": aa
            },
            success: function(response) {
                $("#result").html(response.number1); // This depends on how you've sent response from server
            }
        });
    });
});

Jquery ajax post via link

2 Answers2