Question

我一直在阅读和尝试不同的事情，但我似乎无法得到Jquery的支持。

这里是上下文：使用PHP，我从我的数据库中获取了10个随机项。我点击了开始按钮，其中一个项目显示。然后，用户可以对项目进行评级（喜欢或不喜欢），该结果将在DB中更新，下一个显示。评分十项后，应用程序将重置，您可以再次点击开始按钮重新开始。

现在我还需要使用jQuery或javaScript，这样用户就不必一直刷新。我不知道如何开始。我知道你们都说'阅读文档＆＃39;，老实说，我有，我只需要一些指示，这样我就可以搞清楚。

点击开始按钮

<input type="submit" name="action" value="start" />

php文件中的

变量填充了这个

<article>
<header>
<h1><?php echo $_SESSION['videos'][$_GET['id']]['title'].' - '. $first.'.'?></h1>
<h2>Originally by <?php echo $_SESSION['videos'][$_GET['id']]['artist'] ?></h2>
</header>
...
<video width="205" height="319"  controls>
<source src="assets/videos/<?php echo $_SESSION['videos'][$_GET['id']]['video'] ?>"type="video/mp4">
</video>

使用这些按钮的速率+重定向到十个

中的下一个随机项目

<input type="submit" name="action" value="like" />
<input type="submit" name="action" value="dislike" />

这一切都运行正常，但我如何使用jQ / Js？我在想什么：将点击事件链接到开始按钮，防止默认。但那又怎样？我需要从数据库中加载10个随机项，将第一个附加到正文，然后将click事件添加到like / dislike按钮，防止默认并更新数据库而不进行重新刷新。

任何人都有一些指示？在这里苦苦挣扎......

由于

Answer 1

这是这种事情的基本流程，但你的实现可能会有所不同

$('input[value="like"]').click(function(){
    var video_id = //however you want to supply video_id here
    $.post('likehandler.php',{id:video_id}, function(result){
        //result is just whatever likehandler.php echos to the screen (usually json_encoded data)
        //your php page would mark the video with the $_POST[id], and then grab a new random video 
        //result.next_video is a json_encoded object from your php page
        if(result.next_video){
            //if your ajax response contains a new video, remove the old, and replace it with the new
            $('video').remove();
            $('body').append("<video width... src='assets/videos/"+result.next_video.video+"' type...">);
        }
    }, 'json');
});

//possible example of likehandler.php
    <?php
        $video_id = $_POST['id'];
        //update video with one more vote in database

       $next_video = //get a random video from database
       echo json_encode(array("status"=>"success","next_video"=>$next_video));
    ?>

这绝对不是复制和粘贴的答案，而是它的基本流程，并且可以指出你的工作原理。

使用jQuery循环+更新DB

1 个答案: