Как я могу использовать ajax для получения значения из атрибута данных, когда я щелкаю по определенному тегу span (класс щелчка документа> span this data-value) - PullRequest
Новая
       12

Как я могу использовать ajax для получения значения из атрибута данных, когда я щелкаю по определенному тегу span (класс щелчка документа> span this data-value)

0 голосов
/ 26 августа 2018

Как я могу использовать ajax для получения значения из атрибута данных, когда я нажимаю на определенный тег span в этом случае? Я не могу исправить ошибку

"HANDLER - (.php file: 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(){

Процессор был подвешен на элементах span внутри .live class .live class 

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

Когда вы нажимаете на текст внутри span, этот 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>

Я так пытался

это точно те же цифры внутри атрибута data Я не могу получить эти числа

Если сказать это: 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, в зависимости от того, на какой интервал он нажимал

исправлено: удалена ненужная точка с запятой , но значение, полученное из обработчика, пусто, то есть только сообщение без значения атрибута в диапазоне

Также я пытался так: 

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

Спасибо

...