Jquery ajax发布链接

时间:2015-05-28 09:00:28

标签: javascript jquery ajax

我想通过链接发帖。但我认为存在问题。我不擅长Javascript。 我想用div发送属性和显示。

这是我的代码:

  <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>

2 个答案:

答案 0 :(得分:0)

您可以这样做:

$(".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); 
            }
      });
});

由于DOM中的id应该是唯一的,因此您可以指定类似的class名称来一次性捕获click个事件。 html中的一些修改 - 使用html5的data-*属性是好的:

<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>

答案 1 :(得分:0)

$(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
            }
        });
    });
});