Question

我刚用PHP（ajax）和Jquery做了一个饼图...现在我有两个小问题，希望你能解决。第一个是...在我的网页上显示我正在使用的部分代码。当我删除代码时，它不再起作用了。

屏幕上显示的部分是（＆＃34; gestemd＆＃34; =＆gt;＆＃34; $ a＆＃34;，＆＃34; stemmen＆＃34; =＆gt;＆＃34; $ d＆＃34 ;）赞：

enter image description here

我不明白为什么{标签显示在屏幕上和（在代码中。

我的第二个问题也不是那么大的问题....我的图片背景是红色我想改变它的白色。我怎么做？我在我的数据库中使用的图像在单击A B C或D时会发生变化。颜色部分切片：

enter image description here

您可以看到它有效：http://72321.ict-lab.nl/test/Opdracht3/opdracht3.php

网页代码：

<?
require_once ("../../connection.php");
$opdracht = "SELECT * FROM MEOJ1_Opdracht3";
$result = mysql_query($opdracht);

while ($row = mysql_fetch_array($result)) {
    $votes[] = array(
        "id" => $row['id'],
        "partij" => $row['partij'],
        "stemmen" => $row['stemmen']
    );
}
include ("stemmen.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Opdracht 3</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<button name="p1" id="p1">Partij A</button><br>
<button name="p2" id="p2">Partij B</button><br>
<button name="p3" id="p3">Partij C</button><br>
<button name="p4" id="p4">Partij D</button>

<p id="text">Gestemd op: <span id="gestemd"></span></p>

<table>
    <tr>
        <td>
            <div class="rood"></div>
        </td>
        <td>
            <? echo $votes[0]['partij'] ?>: <span id="stemmen1"><? echo $votes[0]['stemmen'] ?></span>
        </td>
    </tr>
    <tr>
        <td>
            <div class="geel"></div>
        </td>
        <td>
            <? echo $votes[1]['partij'] ?>: <span id="stemmen2"><? echo $votes[1]['stemmen'] ?></span>
        </td>
    <tr>
    </tr>
        <td>
            <div class="blauw"></div>
        </td>
        <td>
            <? echo $votes[2]['partij'] ?>: <span id="stemmen3"><? echo $votes[2]['stemmen'] ?></span>
        </td>
    <tr>
    </tr>
        <td>
            <div class="groen"></div>
        </td>
        <td>
            <? echo $votes[3]['partij'] ?>: <span id="stemmen4"><? echo $votes[3]['stemmen'] ?></span>
        </td>
</table>


<div id="afbeelding">
    <img src='http://72321.ict-lab.nl/database/stemmen.png' alt="Stem diagram" title="Stem diagram" />
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
    $( "#p1" ).click(function() {
        vote(1);
    });
    $( "#p2" ).click(function() {
        vote(2);
    });
    $( "#p3" ).click(function() {
        vote(3);
    });
    $( "#p4" ).click(function() {
        vote(4);
    });

    function vote(partij) {
        $.ajax({
            type: "GET",
            url: "stemmen.php?partij="+partij,
            dataType: "text json",
            success: function(data) {
                var gestemd = data.gestemd;
                var stemmen = data.stemmen;
                document.getElementById('gestemd').innerHTML=gestemd;
                document.getElementById('text').style.display = 'inherit';
                document.getElementById('stemmen'+gestemd).innerHTML=stemmen;
                document.getElementById('afbeelding').innerHTML="<img src='http://72321.ict-lab.nl/database/stemmen.png' />";
            }
        });
    }
</script>

投票（stemmen.php）代码：

<?php

require_once("../../connection.php");

$a = $_GET['partij'];
$b = mysql_query("SELECT stemmen FROM MEOJ1_Opdracht3 WHERE id = ".$a);
$c = mysql_fetch_array($b);
$d = $c['stemmen'];
$d = $d + 1;
$b = mysql_query("UPDATE MEOJ1_Opdracht3 SET stemmen = ".$d." WHERE id = ".$a);
$e = array("gestemd" => "$a", "stemmen" => "$d");
print_r(json_encode($e));
$f = "SELECT stemmen FROM meoj1_opdracht3";
$g = mysql_query($f);
while ($h = mysql_fetch_array($g))
{
    $i[] = array("stemmen" => $h['stemmen']);
}

$j = $i[0]['stemmen'];
$k = $i[1]['stemmen'];
$l = $i[2]['stemmen'];
$m = $i[3]['stemmen'];
$n = $j + $k + $l + $m;
$o = 360 / $n;
$p = $j * $o;
$q = $k * $o;
$r = $l * $o;
$s = $m * $o;
$t = imagecreate(300, 300);
$u = imagecolorallocate($t, 198, 7, 18);
$v = imagecolorallocate($t, 200, 198, 41);
$w = imagecolorallocate($t, 6, 25, 196);
$x = imagecolorallocate($t, 30, 198, 33);
imagefilledarc($t, 125, 125, 200, 200, 0, $p, $u, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, $p, ($p + $q), $v, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q), ($p + $q + $r), $w, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q + $r), ($p + $q + $r + $s), $x, IMG_ARC_PIE);
imagepng($t, "../../database/stemmen.png");

?>

数据库： enter image description here

Answer 1

print_r(json_encode($e));中有一个stemmen.php。这将输出您在屏幕上看到的内容。问题是stemmen.php似乎是针对AJAX结果，因为它返回一个JSON字符串。您需要做的是删除include ("stemmen.php");，因为您已经使用AJAX调用此代码。如果你删除它，你应该看到它消失。

在stemmen.php中，您将背景颜色设置为红色，但您没有为该空白部分定义颜色。如果要将背景更改为白色但仍然看到该空白部分的红色，则需要执行以下操作：

改变这个：

$t = imagecreate(300, 300);
$u = imagecolorallocate($t, 198, 7, 18);
$v = imagecolorallocate($t, 200, 198, 41);
$w = imagecolorallocate($t, 6, 25, 196);
$x = imagecolorallocate($t, 30, 198, 33);
imagefilledarc($t, 125, 125, 200, 200, 0, $p, $u, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, $p, ($p + $q), $v, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q), ($p + $q + $r), $w, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q + $r), ($p + $q + $r + $s), $x, IMG_ARC_PIE);
imagepng($t, "../../database/stemmen.png");

到此：

$t = imagecreate(300, 300);
$u = imagecolorallocate($t, 255, 255, 255); // BACKGROUND WHiTE
$red = imagecolorallocate($t, 198, 7, 18); //CREATES THE RED FOR THE SECTION
$v = imagecolorallocate($t, 200, 198, 41);
$w = imagecolorallocate($t, 6, 25, 196);
$x = imagecolorallocate($t, 30, 198, 33);
imagefilledarc($t, 125, 125, 200, 200, 0, $p, $red, IMG_ARC_PIE); //creates RED SECTION
imagefilledarc($t, 125, 125, 200, 200, $p, ($p + $q), $v, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q), ($p + $q + $r), $w, IMG_ARC_PIE);
imagefilledarc($t, 125, 125, 200, 200, ($p + $q + $r), ($p + $q + $r + $s), $x, IMG_ARC_PIE);
imagepng($t, "../../database/stemmen.png");

您遇到的第三个问题，我认为与您在JS中添加新图像的方式有关。附加新图像时，必须告诉浏览器它已更改。由于图像名称相同，因此您必须创建某种类型的字符串来更改图像名称，以便浏览器知道它已更改。一种方法是通过提供时间字符串并将其放在图像的位置。试试这个：

改变这个：
```
document.getElementById('afbeelding').innerHTML = "<img src='http://72321.ict-lab.nl/database/stemmen.png' />";
```
到此：
```
 var time = (new Date).getTime();
 document.getElementById('afbeelding').innerHTML = "<img src='http://72321.ict-lab.nl/database/stemmen.png?"+time+"' />";
```

要返回名称：

$b = mysql_query("SELECT partij, stemmen FROM MEOJ1_Opdracht3 WHERE id = ".$a);
$c = mysql_fetch_array($b);
$d = $c['stemmen'];
 $name = $c['partij'];
....
$e = array("gestemd" => "$a", "stemmen" => "$d", "name"=> $name);
...

饼图问题

1 个答案: