Использование jQuery/PHP/mySQL для обновления базы данных и отображения нового результата

Question

Привет всем Я довольно новичок в программировании. Я преподаю себе php и css и пытаюсь объединить это с некоторым jQuery.

У меня есть сайт со списком элементов, который я хочу разрешить пользователю проголосовать. (Www.blueskycouncil.com вы можете войти со стеком/это)

в настоящее время я обновление базы данных, отправив это:

<a href=\"idea_karma.php?pagetype=index&karmatype=ideaspace&id={$row['id']}&sort_id=$sort_id\"> 

к idea_karma.php, проверьте, если пользователь уже проголосовал на него и если не обновить базу данных.

Это работает отлично (нуб код в сторону)

Теперь я хочу сделать это с JQuery вместо так что я только обновить точку, а не всю страницу.

Две из переменных являются динамическими (id и sort_id), конкретное значение get назначается в цикле.

Мой вопрос в том, как я подхожу к этому?

Я пробовал пару вещей, но я не могу заставить их работать.

Это sript

<script type="text/javascript"> 
function get() { 
$.get('idea_karma.php', {"pagetype": index, "karmatype": ideaspace, "id": id, "sort_id": sortid}, 

function (output) { 
    $('#karma').html(output).show(); 
    }}; 

} 

Это где я делаю вызов сценария

<div class=\"karma-btn\"> 
<a href=\"idea_karma.php?pagetype=index&karmatype=ideaspace&id= {$row['id']}&sort_id=$sort_id\" onClick=\"get();\"> 
<img src=\"images/btn_lrg_karma.png\" alt=\"Alternative text\"> 
<span class=\"voted\"><div id="karma">{$row['karma']</div>}</span></a>              </div> 

Answer 1

Что вам нужно сделать, это изменить эту ссылку, чтобы она вызывала функцию javascript с соответствующими параметрами при нажатии. Javascript функция будет делать AJAX, и выглядеть примерно так:

function updateKarma(id, sortId){ 
    $.post("idea_karma.php", 
    {pagetype: "index", karmatype: "ideaspace", id: id, sort_id: sortId}, 
    function(){ 
    //in here you can do you stuff when the call returns 
    alert("karma updated"); 
    }); 
} 

Затем ваш код ссылки будет выглядеть следующим образом:

<a href=\"javascript:void(0);\" onclick=\"updateKarma('{$row['id']}', '$sort_id')\"> 

Я думаю, что это то, что вы после этого?

Answer 2

Посмотрите на API JQuery для Ajax, Get, Post. Если вам нужна конкретная помощь с кодом, который вы уже писали, я бы рекомендовал его опубликовать, и мы можем помочь вам устранить неполадки.

Answer 3

Вы можете назначить функцию OnClick к якорю, как показано ниже -

<a href="#nodo" onclick="update_vote('<?=$row['id']?>','<?=$sort_id?>')">vote</a> 

Тогда вы можете написать функцию ниже в файле JS -

function update_vote(id,sort_id){ 


//Now you can call the url you were calling through the of the jquery. 

// You can update spection section in page in the `sucess` callback function of ajax. 

} 

Подробная документация Аякса доступна по адресу - http://api.jquery.com/jQuery.ajax/

Answer 4

Ниже приведена основная идея, которая поможет вам получить ajax:

function doKarma(id, sort_id) { 
    var keyValue = { 
     'method' : 'doKarma', 
     'pageType' : 'index', 
     'karmaType' : 'ideaspace', 
     'id' : id, 
     'sort_id' : sort_id 
    };  
    $.post('/idea_karma.php', keyValue, function(xml) { 
     var stat = $(xml).find('rsp').attr('stat'); 
     // stat will represent whether your api call failed or was a success 
     if (stat === 'ok') { 
      // update your counter 
      alert('success'); 
     } 
     else { 
      // user has already voted or something went wrong 
      alert('failed'); 
     } 
    },'xml'); 
} 

Это пример вашей идеи_кармы.php page

<?php 

if ($_POST['method'] == 'doKarma') { 
    //perform update of karma 

    header("Content-type: text/xml"); 
    // if success 
    echo '<rsp stat=\"ok\"></rsp>'; 
    // else echo '<rsp stat=\"error\"></rsp>'; 
} 

?>