Реализация Ajax/JQuery

ОК, я предваряю это предупреждением о том, что мои навыки кода действительно рудиментарны - я объединил все, что могу, но мой недостаток опыта работы с Javascript не позволяет мне реализовать этот окончательный вещь. У меня установлена моя страница: http://excitable.media/reddit.php Реализация Ajax/JQuery

Это почти то, что я хочу. Стрелки изменяются по клику с помощью CSS. Большое число вызывается из базы данных SQL в таблице с именем votes, которая имеет только один столбец - count. Теперь я хочу, чтобы когда кто-то нажимал стрелку вверх, счетчик увеличивался на единицу, а количество голосов на странице обновлялось. Я знаю, что мне нужен AJAX/JQuery, но это еще раз, даже для синтаксиса. Вот код страницы прямо сейчас:

<html> 
<head> 
<meta charset="utf-8"> 
<title>Reddit</title> 

<link rel="stylesheet" type="text/css" href="css/css/reddit.css"> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="css/js/reddit.js"></script> 

</head> 
<body> 
<h1>reddit</h1> 

<div class="container"> 
<div class="up"> 
<input id="img-switcher" type="checkbox"></input> 
<label for="img-switcher"></label> 
</div> 
<div class="count" id="vote-value"> 
<?php 
include '../php/config.php'; 
$con; 
$dbhandle; 
$selected; 
if($vote) 
echo $vote[0]; 
?> 
</div> 
<div class="essay"> 
<p>Registering an account with Reddit [paragraph text omitted]</p> 
</div> 
<div="down"> 
<input id="img-switcher-2" type="checkbox"></input> 
<label for="img-switcher-2"></label> 
</div> 
</div> 

</body> 
</html>

Может ли кто-нибудь помочь мне с этим рудиментарным проектом кодирования? У меня есть еще один файл PHP под названием «insert.php», который подключается к базе данных, а затем говорит:

$update=mysql_query("UPDATE 'votes' SET 'count'='count'+1)"); 
if(mysql_query($update)){ 
    return "success!"; 
} 
else { 
    return "failed!"; 
}

Файл reddit.js полностью разряжен прямо сейчас, это то, где я ожидал, чтобы поместить код, чтобы сделать это Работа. Также стоит упомянуть, что я вообще не забочусь о стрелке вниз. Я не хочу, чтобы он функционировал. Я только хочу, чтобы стрелка вверх работала. Меня не волнует, если люди нажимают его более одного раза с одного и того же IP-адреса.

источник

2015-03-30 Jeffrey Boruszak

'mysql_query' - устаревшая функция. Если вы все еще учитесь, это отличное время, чтобы узнать о его замене. – GolezTrol

И я думаю, вы использовали неправильные кавычки в заявлении об обновлении. Обычные одинарные кавычки предназначены для строк, а не для того, чтобы заключать идентификаторы. – GolezTrol

Этот запрос никогда не будет работать. '' votes'' - это строка. Вы хотите '\' vote \ ''. – tadman

Как уже упоминалось, вы должны изменить свой код mysql. Что касается JS, вы могли бы сделать что-то вроде этого:

var blocked = false; // if we are waiting for a server response, we need to block up arrow click 
$(document).ready(function(){ 
    $(".up").click(function(){ // on click 
     if(blocked == false){ // if we are not waiting a server response 
      blocked = true; // we are waiting a server response 
      $.ajax({ //make ajax 
       url: "insert.php" 
      }).success(function(msg){ 
       if(msg == "success!"){ // if it was success, add 1 to our local count 
        $(".count").text(Number($(".count").text()) +1) 
       }else{ 
        console.log(msg) 
       } 
       blocked = false; // allow up arrow click again 
      }).fail(function(){ 
       console.log("failed") 
       blocked = false;// allow up arrow click again 
      }) 
     }   
    }) 
})

Примечание: Было бы еще лучше, чтобы вернуть новый отсчет от сервера в случае, если 2 или более различных пользователей обновляют счетчик, в этом случае локальная страница будет показать неправильный подсчет

источник

2015-03-30 17:04:43 juvian

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

$("button").click(function(){ 
    $.ajax({url: "demo_test.txt", success: function(result){ 
    $("#div1").html(result); 
    }}); 
});

http://www.w3schools.com/jquery/ajax_ajax.asp и во-вторых, ваше обновление я запрос s неточно повторите проверку еще раз

источник

2015-03-30 17:06:50

Спасибо всем, кто разместил помощь - это был долгий процесс, но я НАКОНЕЦ получил его работу. Я сделал несколько учебников по JQuery, SQL и PHP и значительно улучшил код ... конечный виновник, который увяз меня, оказался файловым путем к файлам вне корня!

Для Javascript для простых команд $ .get и $ .post было более чем достаточно. Я закончил тем, разделив его в одну функцию, чтобы загрузить счетчик на начальном этапе, и один счет, чтобы обновить/изменить количество, каждый ссылается другой файл PHP:

$.get('/css/js/fetch.php', function(data) { 
     $('.count').html(data); 
});

$('#up').click(function(){ 
    $.post('/css/php/insert.php', function(data) { 
     $('.count').html(data); 
    }); 
});

Другое дело, что (если кто-либо ищет одну и ту же проблему и читает это), то как именно информация поступает из файла PHP в Javascript. В выборке.PHP (для начального экрана), я писал:

$result = mysql_query("SELECT * FROM votes WHERE id = 1"); 
while ($row = mysql_fetch_assoc($result)) { 
    echo $row["VoteCount"]; 
}

«ключ», я думаю, использует эхо, чтобы создать выходной, что Javascript, то просто хватает (я смотрел на json_encode, но я думаю, что был более сложным, чем мне нужно)

источник

2015-04-13 20:16:22

Реализация Ajax/JQuery

ответ

Смежные вопросы