Echats結合Ajax實現無重新整理實時投票

阿新 • • 發佈：2019-01-17

第一步：前臺頁面(使用Ajax獲取資料初始化顯示投票現狀並實時更新顯示)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Echarts方式修改投票</title>
    <script src="jquery-1.8.3.js"></script>
    <script src="echarts.js"></script>
</head>

<body>
    <fieldset>
        <legend>請投下您寶貴的一票</legend>
        <form action="" method="post">
            <input type="radio" name="vote" value='1' checked>小布什
            <input type="radio" name="vote" value='2'>奧巴馬
            <input type="button" value="投票" id="btn">
            <!-- <input type="hidden" name="ac" value="ac"> -->
        </form>
    </fieldset>
    <div id="mychart" style="width: 300px;height: 400px;"></div>
</body>
<script>
    var opt = document.getElementsByName('vote');
    var btn = document.getElementById('btn');
    var vote;
    var e = echarts.init(document.getElementById('mychart'));
    var op = {
        title: {
            text: '參選人投票現狀',
            left: 'center'
        },
        legend: {
            data: ['姓名'],
            left: 'left'
        },
        //設定圖表與容器盒子的邊距
        grid: {
            top: 40,    //距離容器上邊界40畫素
            left: '15%'   //距離容器下邊界30畫素
        },
        xAxis: {
            data: []
        },
        yAxis: {

        },
        //滑鼠懸停在資料條上時顯示資訊
        tooltip: {
            trigger: 'item',
            formatter: "{b},{c}"
        },
        series: [{
            name: '姓名',
            type: 'bar', //設定圖表型別為柱形圖
            data: [],
        itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#615a5a'
                        },
                        formatter: function (params) {
                            if (params.value == 0) {
                                return '';
                            } else {
                                return params.value;
                            }
                        }
                    }
                }
            },
        }],

    };
    //頁面載入後顯示當前參選人計票資訊
    $.ajax({
        type: "post",
        url: 'vote.php',
        success: fn,
        dataType: "json"
    });

    function fn(data) {
        var votes = [];//投票數
        var names = []; //參選人
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            names.push(data[i].name);
            votes.push(data[i].count);
        }
        console.log(names, votes);
        //繫結資料
        e.setOption({
            xAxis: {
                data: names
            },
            series: [{
                name: '姓名',
                data: votes
            }]
        })
    }
    e.setOption(op);
    //點選投票後Ajax更新資料到後臺並將結果顯示到前臺
    btn.onclick = function () {
        vote = opt[0].checked ? opt[0].value : opt[1].value;

        $.ajax({
            type: "post",
            url: 'vote.php',
            data: 'radio=' + vote,
            success: fn,
            dataType: "json"
        });

        function fn(data) {
            var votes = [];//投票數
            var names = []; //參選人
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                names.push(data[i].name);
                votes.push(data[i].count);
            }
            console.log(names, votes);
            //繫結資料
            e.setOption({
                xAxis: {
                    data: names
                },
                series: [{
                    name: '姓名',
                    data: votes
                }]
            })
        }
    };

</script>

</html>

第二步：後臺資料處理返回JSON格式資料：

<?php 
 header("content-type:text/html;charset=utf-8");
 //前端投票後更新資料庫對應參選人的投票資料
 //1.連線資料庫
 if([email protected]_connect("127.0.0.1".":"."3306","root","root"))
 {
	die("MYSQL伺服器連線失敗！");
 }
 if([email protected]_select_db("online007"))
 {die("online007資料庫連線失敗");}
 mysql_query("set names utf8");

 //2.拿到資料並更新到資料庫
 if(isset($_POST['radio'])){
 $id=$_POST['radio'];
 $sql="update vote set count=count+1 where electorid={$id}";
 // echo json_encode($sql);die(); //顯示結果為："update vote set count=count+1 where electorid=1"
 mysql_query($sql);
 }
 //構建取資料的SQL語句獲取資料並返回前臺
 $sql="select count,name from vote group by name";
 $result=mysql_query($sql);
 $data=[];
 while($row=mysql_fetch_assoc($result))
 {
 	$data[]=$row;
 }
 //打包成json資料返回前臺
 echo json_encode($data);
 ?>

頁面效果：

Echats結合Ajax實現無重新整理實時投票

第一步：前臺頁面(使用Ajax獲取資料初始化顯示投票現狀並實時更新顯示)：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

PHP＋AJAX實現無重新整理註冊（帶使用者名稱實時檢測）程式碼

很多時候，我們在網上註冊個人資訊，在提交完頁面後，總得等待頁面重新整理來告訴我們註冊是否成功，遇到網路差的時候，如果註冊了一大串的東西，在經過漫長的等待頁面重新整理後，得到的確是“您的使用者名稱已被使用”或XXXXXXX不合法，我想大家的心情一定特別不爽，今天就介紹個AJA

spring mvc + ajax實現無重新整理下載檔案

JQuery的ajax函式的返回型別只有xml、text、json、html等型別，沒有“流”型別，所以我們要實現ajax下載，不能夠使用相應的ajax函式進行檔案下載。但可以用js生成一個form，用這個form提交引數，並返回“流”型別的資料。在實現過程中，

PHP + JavaScript + Ajax 實現無重新整理頁面載入效果

今天這個實驗的思路就是實現一個無重新整理的頁面載入效果。具體的思路是使用PHP開發後臺，為前臺準備資料，然後使用Ajax技術作為資料的搬運工，將資料從伺服器端拉取到前端，最後使用JavaScript技術將獲取到的資料加工，並顯示在頁面上。資料來源工

javascript專案實戰---ajax實現無重新整理分頁

<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁

如何使用ajax實現無重新整理上傳

詳細程式碼如下 9.upload.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Cont

thinkphp下ajax實現無重新整理刪除

1.foreach遍歷出控制器中分類表中的資料，此處需要注意的是連結跳轉href=”javascript:void(0)”,然後再將js中的函式繫結到點選事件 2.ajax不重新整理刪除：thin

Ajax實現無重新整理表單提交

一般方式實現 <!DOCTYPE html> <html> <head> <meta charset = "utf-8">

Gridview各種功能+AspNetPager+Ajax實現無重新整理儲存過程分頁

儲存過程： GetProductsCount1： CREATE PROCEDURE GetProductsCount1 AS

用AJAX實現無重新整理資料讀取與顯示

*******資料顯示頁ajax.asp: <script type="text/javascript"><!--/* * Author: Wintalen * Email: winalen (at) 163.com * OICQ: 83151085 * C

asp.net mvc基於jQuery+Ajax實現無重新整理分頁

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用

History配合Ajax實現無重新整理頁面跳轉

一些網站頭尾內容都是一樣的，重新整理總顯得浪費。從體驗上講，點選導航，右側Ajax區域性重新整理是更優的策略。 Ajax區域性重新整理小菜，稍有經驗都能輕鬆應對。現在如果提出如下需求：每次ajax重新整理就如果頁面重新整理一樣，可以後退檢視之前內容，怎麼破？

SSH三大框架的整合+利用Ajax實現無重新整理分頁

以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 結合Mysql資料庫進行的ssh整合，實現分頁需要json.js 首先ssh的整合需要匯入所有的jar包在web.xml <?xml version="1.0" e

jsp+ajax實現無重新整理滑鼠離開文字框即驗證使用者名稱

歡迎大牛提意見 jsp+ajax實現無重新整理,滑鼠離開文字框即驗證使用者名稱，操作如下：新建一個輸入頁面，起名為input.jsp, [java] <%@ page contentType="text/html; charset=utf-8"%>

jQuery+php+ajax實現無重新整理上傳檔案功能

jQuery+php+ajax實現無重新整理上傳檔案功能，還帶有上傳進度條動畫效果，支援圖片、視訊等大檔案上傳。 js程式碼

asp.net Mvc4 使用ajax結合分頁外掛實現無重新整理分頁

本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。

用ajax.NET 實現無重新整理投票、評論

C# 中建立新的 ASP.NET 專案，再新增引用 AJAX.dll 檔案。唯一的額外配置步驟是在 <system.web> 元素中（位於 web.config 檔案中）新增以下程式碼。 <configuration> <system.

tp5+ajax+jq實現無重新整理分頁

tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原

ASP.NET+Ajax+JQuey+Json資料+儲存過程實現無重新整理分頁

<script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript">&l

jquery+ajax+servlet實現無重新整理圖片上傳

需要藉助ajaxfileupload.js來實現ajax圖片上傳功能。 html部分： <body> <input id="img" type="file" name="img">//id和name屬性必須都有且同名。。。 <input type="but

Echats結合Ajax實現無重新整理實時投票

相關推薦