Как переписать jQuery на нативный JavaScript

12
LeonCrab
На сайте с 30.01.2007
Offline
189
2116

Подскажите пожалуйста, как переписать кусок jQuery на нативный JavaScript...

Перепробовал все, но так и не смог заставить работать...

Вот кусочек jQuery:

<script>
$(document).ready(function() {
$('span.ajax_links').click(function() {
var action = $(this).data('action');
$('#like').html('<img src="/img/ajax-loader.gif" class="vts">');
$.post(document.location.href, {action: action}, function(data) {
$('#like').html(data);
$('#like').attr('title','Вы уже голосовали');
$('#thanks').html('Спасибо');
})
return false;
})
})
</script>

и кусочек соответствующего кода HTML, к нему

<div id="for_votes">  
<div id="like" title="Нравится?">
<span class="btn btn-success ajax_links" data-action="up">+2964 <span class="glyphicon glyphicon-thumbs-up"></span></span>
<span class="btn btn-danger ajax_links" data-action="down"><span class="glyphicon glyphicon-thumbs-down"></span> -167</span>
</div>
<div id="thanks"></div>
</div>
Помощь в создании сайтов на MODX, Laravel, Slim. В личку. Хостинг, которому я доверяю (https://beget.com/p181956).
ПЗ
На сайте с 10.10.2006
Offline
92
#1
Автомобили в России (http://www.autobb.ru/). Спецтехника BIZ - вся строительная, дорожная, коммунальная техника (http://www.spectehnika.biz/) и другая спецтехника в одном месте.
L
На сайте с 30.10.2015
Offline
34
#2

зачем заново изобретать велосипед?

...
LeonCrab
На сайте с 30.01.2007
Offline
189
#3
levchernenko:
зачем заново изобретать велосипед?

Чтобы не тянуть почти 100 кб jquery...

C
На сайте с 26.10.2013
Offline
54
#4
LeonCrab:
Чтобы не тянуть почти 100 кб jquery...

Тяните с code.jquery.com - у многих пользователей он уже в кеше.

Услуги по парсингу данных (/ru/forum/939826), единоразовый и регулярный сбор данных. Любые объемы. Скрипты на PHP, создание и доработка, решение проблем с сайтами Пишите в личные сообщения или скайп
LeonCrab
На сайте с 30.01.2007
Offline
189
#5
colorito:
Тяните с code.jquery.com - у многих пользователей он уже в кеше.

Мой вопрос изложен выше, если вам нечего сказать по сути - проходите мимо.

S
На сайте с 17.12.2010
Offline
37
#6

Как-то так:

<script language="JavaScript">

function f1() {
var $like = document.getElementById("like").innerHTML;
document.getElementById("like").innerHTML = "<img src=\"loader.gif\" >";
/* здесь видимо какая-то обработка... */
document.getElementById("like").innerHTML = $like;
document.getElementById("thanks").innerHTML = "Спасибо";
document.getElementById("like").title = "Вы уже голосовали";
}
</script>

<div id="for_votes">  

<div id="like" title="Нравится?">
<span class="btn btn-success ajax_links" onclick="f1();">+2964 <span class="glyphicon glyphicon-thumbs-up"></span></span>
<br />
<br />
<span class="btn btn-danger ajax_links" onclick="f2();"><span class="glyphicon glyphicon-thumbs-down"></span> -167</span>
</div>
<div id="thanks"></div>
</div>
LeonCrab
На сайте с 30.01.2007
Offline
189
#7

Переписал вот так, но данные по request все-равно не передаются. Гуру JavaScript'а, что я делаю неправильно?:

[].forEach.call(document.querySelectorAll('span.ajax_links'), function (el) {
el.addEventListener('click', function() {
var action = this.getAttribute('data-action');
document.getElementById('like').innerHTML = '<img src="/ajax-loader.gif" style="height:16px; width:16px;">';


/* с этим - работает
$.post(document.location.href, {action: action}, function(data) {
document.getElementById('like').innerHTML = data;
document.getElementById('like').setAttribute('title','Вы уже голосовали');
document.getElementById('thanks').innerHTML = 'Спасибо';
})
*/

/* а с этим - нет */
request = new XMLHttpRequest();
request.open('POST', document.location.href, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send({action:action});
request.onreadystatechange=function(data){
// if(request.readyState==4 && request.status==200){
document.getElementById('like').innerHTML = data;
document.getElementById('like').setAttribute('title','Вы уже голосовали');
document.getElementById('thanks').innerHTML = 'Спасибо';
// }
}



}, false);
});

R
На сайте с 20.02.2015
Offline
59
#8

1) Метод send принимает в качестве аргумента строку http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp там не может быть JSON данных.

2) Сперва надо определить onreadystatechange а после вызывать send метод


request.onreadystatechange=function(data) {
// foo
}
request.send(string_param);

И вот ссылочка еще http://stackoverflow.com/questions/9516019/send-json-data-to-php-using-xmlhttprequest-w-o-jquery как отправить JSON данные

L
На сайте с 30.10.2015
Offline
34
#9
LeonCrab:
Чтобы не тянуть почти 100 кб jquery...

вот и вот в помощь минимизации кода

LeonCrab
На сайте с 30.01.2007
Offline
189
#10

Спасибо, переписал вот так, но все-равно данные в скрипт не передаются:

[].forEach.call(document.querySelectorAll('span.ajax_links'), function (el) {
el.addEventListener('click', function() {
var action = this.getAttribute('data-action');
document.getElementById('likevote').innerHTML = '<img src="/ajax-loader.gif" style="height:16px; width:16px;">';
request = new XMLHttpRequest();
request.open('POST', document.location.href, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){
document.getElementById('likevote').innerHTML = request.responseText;
document.getElementById('likevote').setAttribute('title','Вы уже высказали свое мнение о статье');
document.getElementById('thanks').innerHTML = 'Спасибо';
}
}
request.send('action=up');
}, false);
//return false;
});

В PHP-скрипте строка обрабатывается так:

if (($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')||(newisipvoted($ip) == 1)) {
return;
} else {
$action = isset($_POST['action']) ? $_POST['action'] : '';
switch ($action) {
case 'up': ............


---------- Добавлено 05.01.2016 в 00:03 ----------

levchernenko:
вот и вот в помощь минимизации кода

Вы предлагаете этими сервисами сжать jQuery ? 🤪

Повторюсь - вопрос в том, чтобы полностью отказаться от всяких jQuery, mootools и т.п. Ведь для реализвации данного функционало достоточно пару строк кода на нативе (это пара-тройка килобайт). Вопрос только в том, что я не особый знаток javascripta...

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий