使用原生ajax訪問後臺數據並將其展現在前端頁面中(小菜鳥自己整理玩的,大神勿噴)

来源:http://www.cnblogs.com/Gabriel-Wei/archive/2016/10/21/5986459.html
-Advertisement-
Play Games

為了讓裡面支持中文,我們加入這句話header("content-type:text/html;charset=utf-8"),此時的tigong.php如下 用我們的瀏覽器跑一下,如圖:將地址欄的信息地址複製一份,用postman測一下數據,如果不知道什麼是postman,請自行百度,後面的數據交 ...


  1. 首先你要有php的環境,關於php環境的搭建,php本地站點的搭建,此處不再重覆請看這裡:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html
    我們把wamp打開,並且在Dreamweaver裡面新建一個phpStudy站點。
    這篇文章我們需要兩個文件,一個test.html前端的頁面,一個tigong.php數據的提供頁,下麵分別進行介紹。
  2. tigong.php
    我們在Dreamweaver,phpStudy站點下麵,新建一個tigong.php頁面,裡面內容如下:
    1 <?php
    2 echo"hello Tom";
    3 ?>

    為了讓裡面支持中文,我們加入這句話header("content-type:text/html;charset=utf-8"),此時的tigong.php如下

    <?php
    header("content-type:text/html;charset=utf-8");
    echo"Hello 李明";
    ?>


    用我們的瀏覽器跑一下,如圖:

    將地址欄的信息地址複製一份,用postman測一下數據,如果不知道什麼是postman,請自行百度,後面的數據交互文章會一直用到postman。(簡而言之,postman就是測試一下給的介面能不能正常接收數據),如圖:

    tigong.php文件準備好了,接下來我們寫我們的前端頁面。



  3. test.html 我們設置為點擊按鈕獲取數據
    <!doctype html>
    <html>
    <head>
    <script type="text/javascript">
     window.onload=function(){
         var bt1=document.getElementById("bt1");
         var div1=document.getElementById("div1");
         //給bt1綁定事件,一會做onload完畢以後裝在數據
         bt1.onclick=function(){
             //第一步:創建ajax對象
             //寫相容
             if(window.XMLHttpRequest){
                 var xmlHttp=new XMLHttpRequest();
                 }else{
                                   //相容IE6
                     var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
                     }
             //第二步:獲取要放送的數據。這個例子沒有
             //第三步:設置一下要發送的方式和請求目標地址
             xmlHttp.open("GET","tigong.php");
             //第三個參數不寫預設是非同步
             
             //第四步:設置請求的編碼
             xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                      
             //第五步:監控整個過程,綁定onreadystatechange事件,總共調了四次0-1.1-2.2-3.3-4,我們需要的是4和200
             xmlHttp.onreadystatechange=function(){
                 if(xmlHttp.readyState==4 && xmlHttp.status==200){
                     //後臺數據輸出什麼,我們的responseText就得到什麼
                     div1.innerHTML=xmlHttp.responseText;
                     }
                 };
            //第六步:發送請求
            xmlHttp.send();
             };         
         };
    </script>
    <meta charset="utf-8">
    <style>
     #div1{
         background:#f00;
         color:#fff;
         font-weight:bold;
         width:200px;
         height:200px;
         }
    img{
        width:200px;
        }
    </style>
    <title>ajax</title>
    </head>
    <div id="div1">
      <!--在數據沒有過來的時候,我們顯示一張loading的圖片,百度搜loading一大推-->
      <img src="images/1.gif"> 
    </div><br>
    <input type="button" id="bt1" value="點擊獲取數據">
    <body>
    </body>
    </html>

    如圖所示:
      

    點擊之後:

    可以看到,我們的php頁面裡面的數據回來了。

  4. 查看一下chrome的開發工具
     在network監控裡面選擇all,可以查看所有文件,如果沒有,就刷新一下頁面,


    點擊tigong.php



 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 求子串 數據結構中對串的5種最小操作子集:串賦值,串比較,求串長,串連接,求子串,其他操作均可在該子集上實現 數據結構中串的模式匹配 數據結構中串的模式匹配 KPM模式匹配演算法 基本的模式匹配演算法 看的出來,每當匹配不成功時,i總是回朔本次匹配的開始位置KPM,一種改進了的模式匹配演算法,解決i回朔問 ...
  • 2016-10-22 12:22:42 相關概念 AJAX(Asynchronous Javascript And XML)即“非同步JavaScript和XML”; 是指一種實現客戶端和伺服器的數據傳遞的網頁開發技術; 核心:局部刷新,非同步載入; 即“在不需要刷新頁面的情況下,就可以與Web伺服器交 ...
  • IndexedDB是HTML5規範里新出現的瀏覽器里內置的資料庫。對於在瀏覽器里存儲數據,你可以使用cookies或local storage,但它們都是比較簡單的技術,而IndexedDB提供了類似資料庫風格的數據存儲和使用方式。存儲在IndexedDB里的數據是永久保存,不像cookies那樣只 ...
  • 在這園子里看到了很多優秀的資源,自己也想寫寫東西,就突然想到了以前遇到寫sass的時候出現中文亂碼的解決方案。所有就自己又總結了一下。(以下測試步驟都是自己完成的!沒有任何轉載,如有錯誤,希望大家指正) 簡單說明下:sass來編寫css樣式方便了很多,讓我們本來沒有邏輯處理能力的css語法,在sas ...
  • 箭頭函數(Arrow Functions) 就像名字所說那樣,箭頭函數使用箭頭(=>)來定義函數。與傳統函數相比,箭頭函數在多個地方表現不一樣。 箭頭函數語法(Arrow Function Syntax) 箭頭函數有多種實現方法。比如你想實現一個只有一個參數並且直接返回此參數值的函數: 上面的例子中 ...
  • HTML 語法 用兩個空格來代替製表符(tab) -- 這是唯一能保證在所有環境下獲得一致展現的方法。 嵌套元素應當縮進一次(即兩個空格)。 對於屬性的定義,確保全部使用雙引號,絕不要使用單引號。 不要在自閉合(self-closing)元素的尾部添加斜線 --HTML5 規範中明確說明這是可選的。... ...
  • 今天電腦按了一下xampp,結果運行wamp的時候,出現了下麵的情況: 在網上查了一下,結果是埠被占用,然後我就手動修改了一下。 1.修改xampp的埠號 依次找到:XAMPP的安裝目錄(比如D:\xampp)\apache\conf\httpd.conf,用記事本或notepad等工具打開ht ...
  • js做全選,用一個checkbox覆選框做多個checkbox覆選框的全選按鈕,有一個覆選框未被選擇時,全選按鈕的checked就為false ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...