Question

在这种情况下，当我单击特定的span标签时，如何使用ajax从data属性中获取值？我无法更正error

“ HANDLER-（.php文件：a.php）”

<?php if(isset($_POST['name'])){
    $name = $_POST['name'];
    $q = 'you rate' . $name;
    echo json_encode($q);
    }
?>

“样式” stars.png

<style>

星级评分

 .rating .stars {
  position: relative;
  display: block;
  float: left;
  height: 20px;
  width: 105px;
  background-image: url("stars.png");
  background-position: 0 0;
  background-repeat: repeat-x;
  margin-right: 5px;
}

星级评分

.rating .stars .on {
  height: 20px;
  background-image: url("stars.png");
  background-position: 0 -20px;
}

星级评分

 .rating .stars .live {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

星级评分

.rating .stars .live span {
  display: block;
  float: left;
  cursor: pointer;
  width: 21px;
  height: 20px;
  background-image: url("stars.png");
  background-repeat: no-repeat;
  background-position: 0 -20px;
}

星级评分

.rating .stars .live span:hover ~ span {
  background-position: 0 0px;
}
.rating .stars .live:hover {
  opacity: 1;
}  
</style>

“资源”

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

“ HTML”

<div class="rating">
  <div class="stars">
    <div class="on" style="width: 88%;"></div>
    <div class="live">
      <span data-rate="1"></span>
      <span data-rate="2"></span>
      <span data-rate="3"></span>
      <span data-rate="4"></span>
      <span data-rate="5"></span>
      <input id="view-rating" value="">
    </div>
  </div>
</div>

“ JS> JQERT> AJAX”

 <script>
        $(function(){

处理器悬挂在.live类.live类内的span元素上

$(document).on('click', '.live > span', function(){

当您单击跨度内的文本时，此ayax请求称为

 $.ajax({

定义了POST请求的类型

type: 'POST',

要在哪里敲门的URL

 url: 'index.php',

在此上下文中，这是元素单击，我们将其包装在jquery中以获取数据并发送到我们服务器的键名下，

 data: {
                    name:$(this).data('rate')
            },
            cache: false,
            success: function(responce){
                $('#view-rating').attr('value', responce);
            }
        });
    });
});
</script>

I tried so

这就是data属性I can not get these numbers

中的这些数字

如果这样说：name:$(this).text()则没有错误，但是需要从“ <span data-rate="”值中以数字（1、2、3、4或5的形式）获取值）"

这也是一个简单的例子：

<button class="add_to_cart" data-product="volume">add to cart</button>
$('.add_to_cart').on('click', function(){
var prodData = $(this).data('product'); // "volume"
});

，只需要对多个span标签执行此操作，并使用ajax查询，具体取决于它单击的跨度

已修复，删除了不必要的semicolon，但是来自处理程序的值是空的，也就是说，只有message的属性值不在span范围内

我也这样尝试过：

 <script>
    $(document).ready(function(){ 
    $('.live > span').on('click', function(){ 
    var myRate = $(this).data('rate');
    $.ajax({ 
    type: 'POST', 
    url: 'index.php', 
    data: { 
    name: myRate
    }, 
    cache: false, 
    success: function(responce){ 
    $('#view-rating').attr('value', responce); 
    } 
    }); 
    }); 
    });
    console.log(name) //empty
    </script>

一个朋友提示我，现在对我有用：

<script>
$(document).ready(function(){ 
$('.live > span').on('click', function(){ 
var myRate = $(this).attr('data-rate');
$.ajax({ 
type: 'POST', 
url: 'a.php', 
data: { 
name: myRate
}, 
cache: false, 
success: function(responce){ 
responce = JSON.parse(responce);
$('#view-rating').val(responce);
console.log(responce);
} 
}); 
}); 
});
</script>

谢谢

单击特定的span标签时，如何使用ajax从data属性获取值（文档单击类>对此数据值进行扩展）

0 个答案: