2013-03-04 116 views
0

所以,我想我已经想通了,但是,不。所以我可以在这里使用任何帮助。轮询页面重访PHP/AJAX

我有一个html页面。在那个页面上我有三个链接。每个链接代表不同的数据。当用户点击这些链接时,它会发布到一个PHP页面并将该数据携带到PHP页面。 PHP页面将更新数据库。然后,PHP页面将返回更新结果返回到HTML页面。

我知道这需要JQuery,PHP和Ajax。

这是我现在有从板一些帮助:

HTML页面

<script src="_js/jquery-1.7.2.min.js"></script>  <!-- Linking jQuery --> 
<script>       

$(document).ready(function() { 
$('.answer').click (function (e) { 
    var color = $(this).attr("data-color"); 
    $.ajax({ 
     url: 'mm.php', 
     type: 'POST', 
     data: '{ color: "'+color+'" }', 
     success: function (res) { 
      ... 
     }, 
     error: function (jqXHR) { 
      ... 
     } 
    }) 
}) 
        } 
</script> 

<title>M&M Poll</title> 

</head> 

<body> 
<h1>VOTE FOR YOUR FAVORITE COLOR M&M</h1> 
<h2>Click the M&M to vote</h2> 

<div id="wrapper"> 

<div id="red" data-color="red" class="answer"> 
<a href="#"><img src="images/red.jpg" width="100%" /></a> 
</div> 



<div id="blue" data-color="blue" class="answer"> 
<a href="#"><img src="images/blue.jpg" width="100%" /></a> 
</div> 


<div id="green" data-color="green" class="answer"> 
<a href="#"><img src="images/green.jpg" width="100%" /></a> 
</div> 


<div id=rvotes> 
TEST 
</div> 

<div id=bvotes> 
TEST 
</div> 

<div id=gvotes> 
TEST 
</div> 

PHP页面

<?php 

function showVotes() 

{ 
$sql = "SELECT * FROM mms"; 
$result = mysql_query($sql) or die(mysql_error()); 
$showresult = mysql_query("SELECT * from mms") or die("Invalid query: " . mysql_error()); 
    while ($row = mysql_fetch_array($showresult)) 
    { 
    echo ("<br> M&M = ". $row["color"] . " has " . $row["votes"] . "votes <br>"); 
    } 
} 

function addVote() 

{ 
$sql= "UPDATE mms SET votes = votes+1 WHERE color = 'red'"; 
$result= mysql_query($sql) or die(mysql_error()); 
return $result; 
} 

?> 

我知道我的数据库工程。我只需要连接HTML/AJAX/PHP

任何帮助超级赞赏!

+4

你告诉我们你想要做什么 - 但你没有告诉我们您需要哪一部分帮助上。 – Duniyadnd 2013-03-04 18:57:20

+0

一个错误,我看到的是一个缺乏e.preventDefault()的','在点击事件处理程序 - 这意味着浏览器将按照URL的JavaScript有机会做任何事情之前 - 除非你'href'正是只是像上面的锚点 – Greg 2013-03-04 20:25:49

回答

1

嗯,你几乎就在那里,只是一块一块地经历它 - 不一定为你编码,所以你可以自己弄清楚,你会学到更多。

在你的jQuery中,你放入一个类型:'post',这意味着被调用的php文件将包含$ _POST中的数据。

如果您不确定$ _POST阵列中有什么 - 将其打印出来。

例如

print_r($_POST); 

您可能会看到正在输出数组,其中包含“色”

下一页 - 您需要将其插入到你的函数。理想情况下,你的函数需要addVote()中的参数 - 因为这就是它需要输入的内容。这也将教你清理长期运行的信息的方法,所以你不会冒sql的风险。

所以一个快速和肮脏的是:

// you already have this function - add a parameter 
addVote ($color) { // blah } 

addVote ($_POST['color']); 

现在,在您addVote()函数,你是不是真的,因为一切都是红色的特定颜色,所以你需要解决这个问题。

$sql= "UPDATE mms SET votes = votes+1 WHERE color = '$color'"; 

附注:您还使用的mysql_query(),这是顺便说一句过时的,这里的人会鞭打你,如果你继续使用 - 查找MySql PDO或mysqli的(这取决于谁你问)。但是,这是一个不同的线程。

通过这些步骤,您应该看到表已经更新,接下来的事情就是输出结果,这是你在你的其他功能调用 - showVotes();

希望帮助

+0

我知道MySQL已经死了,但我正在为此进行个人项目。我不是专业人士,这只是为了好玩。我的大问题是让它工作。我现在绝对失去了大声笑 – 2013-03-04 19:35:27

+1

让我知道如果你想聊天,让你通过它。 – Duniyadnd 2013-03-04 20:46:48

0

编辑:新的代码,测试和工程

HTML:

<html> 
    <head> 
    <title>M&M Poll</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

</head> 

<body> 
    <h1>VOTE FOR YOUR FAVORITE COLOR M&M</h1> 
    <h2>Click the M&M to vote</h2> 

    <div id="wrapper"> 

    <div id="red" data-color="red" class="answer"> 
    <a href="#">Red</a> 
    </div> 



    <div id="blue" data-color="blue" class="answer"> 
    <a href="#">blue</a> 
    </div> 


    <div id="green" data-color="green" class="answer"> 
    <a href="#">green</a> 
    </div> 


    <div id="rvotes"> 
    TEST 
    </div> 

    <div id="bvotes"> 
    TEST 
    </div> 

    <div id="gvotes"> 
    TEST 
    </div> 
    </div> 
    <script>       
    $(document).ready(function ($) { 
     $('.answer').click (function (e) { 
      e.preventDefault(); 
      var color = $(this).data("color"); 
      $.post('mm.php', { color: color}, function(data) { 
       console.log(data); 
       var obj = $.parseJSON(data); 
       $('#rvotes').html(obj.red); 
       $('#bvotes').html(obj.blue); 
       $('#gvotes').html(obj.green); 
      }); 
     }); 
    }); 
    </script> 
</body> 
</html> 

PHP:

<?php 

$con=mysql_connect("localhost","root",""); 
mysql_select_db('mm_db') or die('Could not select database'); 

// Check connection 
if (mysqli_connect_errno($con)) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 


function showVotes() 

{ 
$sql = "SELECT * FROM mms"; 
$result = mysql_query($sql) or die(mysql_error()); 
$showresult = mysql_query("SELECT * from mms") or die("Invalid query: " . mysql_error()); 
    while ($row = mysql_fetch_array($showresult)) 
    { 
    echo ("<br> M&M = ". $row["color"] . " has " . $row["votes"] . "votes <br>"); 
    } 
} 

function jsonVotes() 

{ 
$sql = "SELECT * FROM mms"; 
$result = mysql_query($sql) or die(mysql_error()); 
$showresult = mysql_query("SELECT * from mms") or die("Invalid query: " . mysql_error()); 
$color_votes = array(); 
while ($row = mysql_fetch_array($showresult)) 
    { 
    $color_votes[$row['color']] = $row['votes']; 
    } 
    return $color_votes; 
} 

function addVote($color) 
{ 
    //If the color is one of the 3 we expect... 
    if($color == "red" || $color == "blue" || $color == "green") { 
    //NEVER put the variable in the query string, especially in production. Always use prepared statements -> http://php.net/manual/en/pdo.prepared-statements.php 
    $sql= "UPDATE mms SET votes = votes+1 WHERE color = '$color'"; 
    $result = mysql_query($sql) or die(mysql_error()); 
    return $result; 
    } else { 
    die(); 
    } 
} 


//If this is an AJAX request 
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
    //Do some sanitization since we're dealing with mysql instead of mysqli or PDO -> http://php.net/manual/en/book.pdo.php 
    $color = htmlspecialchars(trim(strtolower($_POST['color']))); 
    //If the vote was added successfully 
    if(addVote($color)) { 
    echo json_encode(jsonVotes()); 
    } 
} 
?> 

的几个注意事项:考虑PDO 。使用mysql_*既是不好的做法,也是贬值的,但我想尽可能地贴近代码,以便更容易理解它。也请看$.post而不是$.ajax。大多数人喜欢它,因为它的打字时间较短,但这只是个人喜好。

+0

如何?它密切关注你的代码。 – Samsquanch 2013-03-04 19:37:17

+0

在我的代码中,'jsonVotes()'只是'showVotes()'的一个副本,它只是返回一个数组而不是吐出一堆字符串。 'addVote()'是相同的,只是它将颜色作为变量而不是硬编码。 – Samsquanch 2013-03-04 19:44:31

+0

看我的编辑。这个新代码已经过测试,并且100%有效。 – Samsquanch 2013-03-04 20:21:53