html資料動態顯示、利用ajax動態顯示mysql的資料

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

前段時間做個關於資料採集的課設，內容是把溫溼度採集儲存到mysql裡，再用網頁顯示出來。然而網頁的動態顯示卡了好久（溫溼度一直更新，靜態html不能一直重新整理），多次請教最後還是解決了，方法就是利用ajax來實現。

準備工作

環境：php環境、jquery、mysql

mysql：
資料庫名稱：design
表名：test

mysql> CREATE TABLE `test` (
  `id` int AUTO_INCREMENT NOT NULL, 
  `temp` varchar(2) NOT NULL,
  `humi` varchar(2) NOT NULL,
  PRIMARY KEY(`i 
d`)
);

資料：

INSERT INTO `test` VALUES 
(NULL,'38','99');

功能實現：

一：getData.php檔案連線資料庫，讀取id最大的資料，並且返回一個數據型別的變數。

二：index.html主頁面，JavaScript寫函式， 5秒一次讀取getData.php的返回值，並且顯示、

程式碼：getData.php

<?php
    if($conn[email protected]_connect('localhost','root','password')){
    mysql_select_db("design" 
,$conn);

    $sql = "SELECT * FROM test WHERE id = (SELECT MAX(id)FROM test)";
    if($result = mysql_query($sql)){
    $row = mysql_fetch_array($result);

    echo json_encode($row);
    }

    else echo "查詢失敗！<br>";  
        }
        else echo "連線失敗！<br>";
?>

程式碼：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax_test</title>
<script src="/jquery-1.10.1.min.js"></script>
<script language="javascript" type="text/javascript">


$(document).ready(function(e) {
    getRemote();
});

function getRemote () {
    $.getJSON('./getData.php', function (data) {   
        $('#temp1').text(data['temp'])
        $('#humi1').text(data['humi'])
    })
    setTimeout(getRemote,5000);
}
</script>
</head>

<body>

<h2>房間一：</h2>
<p>溫度：<span  id="temp1">loading...</span>℃</p>
<p>溼度：<span id="humi1">loading...</span>%</p>

</body>

現象：
這裡寫圖片描述

資料庫再插入一個值

INSERT INTO `test` VALUES 
(NULL,'11','11');

網頁沒重新整理資料也改變了。
這裡寫圖片描述

html資料動態顯示、利用ajax動態顯示mysql的資料

前段時間做個關於資料採集的課設，內容是把溫溼度採集儲存到mysql裡，再用網頁顯示出來。然而網頁的動態顯示卡了好久（溫溼度一直更新，靜態html不能一直重新整理），多次請教最後還是解決了，方法就是利用ajax來實現。準備工作環境：php環境、jque

利用ajax動態新增資料時候出現的累加問題

情景如下：下拉選中存在資料,每次點選重新整理操作時候重新載入下拉選，由於採用ajax,每次重新載入前先將原有節點移除，再載入，但是當重新整理過快就會導致原有節點還未清空就又追加了新節點,導致資料重複解決辦法：當點選重新整理操作的時候，觸發單擊事件,將單擊操作利用js設定為不可使用,當

echart實戰：利用ajax動態渲染資料

1.echart介紹與前後端分離 echart是國內百度在維護的一個數據視覺化框架，js編寫，方便生成各種圖表。我的畢設就是關於資料視覺化的，所以打算採用echart做前端展示。由於資料肯定是從後端獲取，為了前後端分離，我決定由後端提供api，前端利用ajax非同步獲取資料並載入。關於echa

淺談移動端的自適應問題——響應式、rem/em、利用Js動態實現移動端自適應

隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具

Jquery chosen動態設定值 select Ajax動態載入資料設定chosen和獲取他們選中的值

在做一個編輯對話方塊時，要對裡面帶有select option的操作。主要是想動態載入option和對option的選中。但是由於專案中使用了jquery裡的chosen()方法，怎麼也無法實現效果。原碼如下： Java程式碼 <select id="viewOLanguage"

select2，利用ajax高效查詢大資料列表（可搜尋、可分頁）

select2是一款jquery外掛，是普通form表單select元件的升級版。可以定製搜尋、遠端資料集（Remote data，本篇主要介紹點）、無限滾動（資料分頁功能，這一點很妙）、還有很多高階的引數設定（有需要的下次介紹）。內建了40種國際化語言

HTML 上傳檔案、過濾型別以及顯示大小

HTML： <h>檔案上傳只支援.xlsx格式</h> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file"

四、利用反射及JDBC元資料編寫通用的查詢方法

一、JDBC元資料 1)DatabaseMetaData /** * 瞭解即可:DatabaseMetaData是描述資料庫的元資料物件 * 可以由Connection得到 */ @Test public void testDatabaseMetaD

Oralce 儲存過程 cursor、type x_cur is ref cursor、sys_refcursor 靜態遊標、強型別弱型別動態遊標、靜態SQL 動態SQL 結合使用總結

直接上程式碼，使用的開發環境： Oracle Database 11g Release 2(11.2.0.4.0) - Enterprise Edition， PL/SQL Develop 12.0.7，Instantclient_12_2； PL/SQL Develop ->

Atitit 專案介面h5化靜態html化計劃---vue.js 把ajax獲取到的資料繫結到表格控制元件 v2 r33.docx

Atitit 專案介面h5化靜態html化計劃---vue.js 把ajax獲取到的資料繫結到表格控制元件 v2 r33.docx 3. 其他 4 1. 場景：應用在專案列表查詢場景下全面的的使用html h5介面分離前後端，使介面可以通用與p

mybaits（查詢與別名、日誌框架顯示sql語句、物件屬性和資料庫表字段不匹配resultMap使用、mysql資料查詢分頁、執行sql和儲存過程、動態SQL語句）

主要是各種配置檔案，建議把整個專案搬到自己電腦上慢慢看。建立maven專案首先是各種配置檔案： pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://m

【echarts踩坑記錄】2.複選框+動態隱藏、顯示資料

第一節的例子裡我將ajax請求返回的所有資料都載入成了餅狀圖，但是實際應用中我們可能並不需要全部顯示，可能需要做一個多選框選擇需要的name再傳給後臺……然而我也不想修改sql。於是就考慮在前端控制啦，後端只需要無腦一次查出全部的資料，讓前端折騰吧～使用者點哪裡我就顯示哪

根據下拉值，使用ajax動態獲取資料（在頁面顯示資料）

前端：1一個下拉html:此處省略2下面是ajax//動態選擇產品：根據產品型別動態編輯產品 function changepType() { $.ajax({ async :

前臺使用ajax動態獲取資料並且顯示在頁面上，SSM框架二級聯動

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.

ajax 動態載入html後不能執行其中的js解決方法

cti 寫入 match IT 通過如果 frame tro 其他事件背景有一個公用頁面需要在多個頁面調用，其中涉及到部分js已經寫在了公用頁面中，通過ajax加載該頁面後無法執行其中的js。解決思路 1. 采用附加一個iframe的方法去執行js，為我等代碼潔癖者

C#利用phantomJS抓取AjAX動態頁面

tin 文件 stringbu == 導致 style 間隔 edi zip壓縮在C#中，一般常用的請求方式，就是利用HttpWebRequest創建請求，返回報文。但是有時候遇到到動態加載的頁面，卻只能抓取部分內容，無法抓取到動態加載的內容。如果遇到這種的話，推薦

thinkPHP利用ajax非同步上傳圖片並顯示、刪除

近來學習tp5的過程中，專案中有個發帖功能，選擇主題圖片。如下：利用原始的檔案上傳處理，雖然通過原始js語句能實時顯示上傳圖片，但是這樣的話會涉及很多相容問題。使用ajax技術，實現選擇性刪除所選圖片功能，並不會有相容問題。表單檔案form： <form method="po

Django通過Ajax利用FormData動態提交表單（包括檔案，字串）

0 需求背景有的時候我們上傳表單，經過後臺處理之後再分發回原來頁面，這時必定會重新整理這個頁面。為了解決這個問題，我們採用JS動態提交表單元素，如：file、text等型別，可以很好的解決這一問題。 1 DOM結構 <form method="post" enctype=

“探訪名企園區、感受行業動態、瞭解人才要求”——西安市阿里雲大資料應用學院企業課堂成功舉行

2018年11月28日，西安文理學院、西安鐵路職業技術學院、西安職業技術學院三所院校的阿里雲大資料應用學院組織18級大資料、雲端計算專業共130名學生前往阿里雲絲路總部和美林資料進行了企業實地參觀，這也是自今年9月份入學後組織的第一次企業課堂活動。

常用資料結構思維：分治、動態規劃、貪心、回溯、分支限界

分治：把一個複雜的問題分成兩個或更多的相同或相似的子問題，再把子問題分成更小的子問題……直到最後子問題可以簡單的直接求解，原問題的解即子問題的解的合併 http://www.cnblogs.com/steven_oyj/archive/2010/05/22/1741370.html#30

html資料動態顯示、利用ajax動態顯示mysql的資料

準備工作

功能實現：

相關推薦