php - 投票页面重新访问 PHP/AJAX

Question

所以，我以为我已经弄清楚了，但是，不。所以我可以在这里使用任何帮助。

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

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

这是我现在在董事会的帮助下得到的：

网页

<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

任何帮助都非常感谢！

score 1 · Accepted Answer

好吧，你就快到了，只是一步一步地浏览它——不一定要为你输入代码，这样你就可以自己弄清楚，你会学到更多。

在您的 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();

希望有帮助

score 0 · Accepted Answer

编辑：新代码，经过测试和工作

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. 大多数人喜欢它，因为它打字更短，但这只是个人喜好。

php - 投票页面重新访问 PHP/AJAX

2 回答 2

Related

Reference