将跨度标签 ID 发送到 URL 而不刷新页面答案

【问题标题】：Send span tag id to the URL without refresh page将跨度标签 ID 发送到 URL 而不刷新页面
【发布时间】：2014-09-02 23:13:31
【问题描述】：

<span id="50">Hello</span>

点击span上方，发送50到不刷新页面的URL

【问题讨论】：

使用 JavaScript 和 Ajax？

标签： javascript jquery ajax

【解决方案1】：

$("span").click(function(){
    $(this).load("http://www.example.com/abc.php?q="+$(this).attr('id'), function(r,s,x){...});
});

【讨论】：

【解决方案2】：

$("span").click(function(){
      $.post("demo_.php",{
           Id:$(this).attr('id');
          },
      function(data,status){
          alert("Data: " + data + "\nStatus: " + status);
          });

});

【讨论】：

【解决方案3】：

响应 ajax 调用的 abc.php 的内容

<?php  
    //perform your work here with span id
    if(isset($_GET['value'])){
        $id = $_GET['value'];  //contains the span id sent using ajax
        $output['id']=$id; // I'm just going to echo the id

        header('Content-type: application/json');
        echo json_encode($output);
    }
?>

进行ajax调用的test.php的内容

<span id="50">Hello</span>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('span').click(function(e) {
        var value = $(this).attr('id');
        $.ajax({    
            url: 'abc.php', 
            type: 'get',
            data: {value:value}, 
            dataType: 'json',  
            success: function(rows){
                console.log('ajaX');
                        alert("from abc.php: value = " + rows['id']);
                    }
                });
            });
        });     
</script>

【讨论】：