Question

所以，我以为我想到了这一点，但是，不，不。所以我可以在这里使用任何帮助。

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

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

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

HTML PAGE

<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

任何帮助都非常赞赏!!

Answer 1

嗯，你几乎就在那里，只是一点一点地完成它 - 不一定为你准备好代码，这样你就可以自己解决它，你会学到更多。

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

如果您不确定$ _POST数组中的内容 - 将其打印出来。

e.g。

print_r($_POST);

您可能会看到输出的数组包含'color'

接下来 - 您需要将其插入到您的函数中。理想情况下，您的函数接受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（）;

希望有所帮助

Answer 2

编辑：新代码，已测试并正常工作

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 / AJAX

2 个答案: