Vue入門學習-使用伺服器傳來的JSON資料交給Vue渲染HTML頁面

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

這個Vue搞得挺不錯,簡單粗暴還有效,上手也不難,記錄一下今天的學習,首先描述一下效果:

使用PHP從資料庫中查詢讀出來一個表的資料,並以JSON格式提供訪問

HTML頁面中使用JQuery的$.getJSON()方法載入JSON資料

JSON資料載入完畢後例項化Vue物件並將資料渲染到HTML頁面中

PHP讀資料庫返回JSON的過程就不細說了,直接來看HTML程式碼吧

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>JSON取數測試</title 
>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body 
>
    <div id="main">
        <table border=1>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>type</td>
                <td>location</td>
            </tr>
            <tr v-for="r in rows" 
>
                <td>{{r.id}}</td>
                <td>{{r.name}}</td>
                <td>{{r.type}}</td>
                <td>{{r.location}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $(document).ready(function () {
        $.getJSON("http://192.168.8.8", function (result, status) {
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
</script>

</html>

這裡補充說明一下,PHP返回的JSON資料是直接用的php內建函式json_encode($一個array型別變數,JSON_UNESCAPED_UNICODE);來實現的,後面跟的引數JSON_UNESCAPED_UNICODE是標註編碼時不要用Unicode,要不然編碼出來的JSON字串裡面所有中文就都會變成/xxxxx這種格式的了.最終PHP輸出的JSON字串格式如下:

[{"id":1,"name":"張三","type":"工業","location":"市局"},{"id":2,"name":"李四","type":"工業","location":"市局"}]

Vue入門學習-使用伺服器傳來的JSON資料交給Vue渲染HTML頁面

這個Vue搞得挺不錯,簡單粗暴還有效,上手也不難,記錄一下今天的學習,首先描述一下效果: 使用PHP從資料庫中查詢讀出來一個表的資料,並以JSON格式提供訪問 HTML頁面中使用JQuery的$.getJSON()方法載入JSON資料 JS

$sce 服務，設定伺服器傳來的資料為可渲染的html資料

伺服器端： service層： @Service public class SearchServiceImpl implements SearchService { @Autowired private SolrTemplate solrTemplate;

後臺傳的json 資料遍歷到HTML 頁面

因為某些原因，專案中突然需要做自己做個ajax非同步獲取資料後動態向表格中新增資料的頁面，網上找了半天都沒有看到現成的，決定自己寫個例子 1、HTML頁面 <!doctype html><html><head> <met

struts2跟easyui 示例一後臺生成json資料傳到前臺html頁面

目標：使用struts2和easyui實現後臺生成json資料，前臺html中table展示資料步驟：1、建立struts2 2、新增json 相關包 3、新增easyui 1、*建立web專案struts2easyui;

iOS 學習日誌 : 向伺服器傳送Json資料

前幾天介面需要我向伺服器傳送一個Json資料，但是利用AFNetWorking中的AFHTTPSessionManager傳送到伺服器，介面接收的串一直是URL編碼過後的串，無法和安卓統一，於是換了另一種方法，利用AFHTTPSessionManager的子類A

Vue-cli使用axios從跨域伺服器獲取JSON資料

首先要在按裝axios的依賴：在npm命令列輸入： npm install axios --save 在main.js引入axios,並在Vue的原型鏈上新增axios: 跟著，在需要獲取資料的元

vue入門學習—組件之間的通信

技術分享默認接收參考圖片 ima 屬性 log 對象父組件傳遞數據給子組件父組件數據可以通過props屬性傳遞給子組件父組件： <template> <div id="app" v-cloak> <my-compone

Vue專案載入本地的json資料模擬請求後臺資料

1. 安裝express和axios npm i express --save & npm i axios --save 網速不好的，可以安裝淘寶映象，使用cnpm 2. 在main.js中引入axios，並掛載到全域性 import axios from ‘axios

vue入門學習筆記

一模板指令簡寫： v-on: ——> @ 例如：v-on:click ——> @click v-bind: ——> : 例如：v-bind:title ——> :title 二模板指令

vue 處理後臺請求json資料，並渲染

後臺傳給前臺的json資料格式，這裡原本只是傳list資料給後臺，因為需要分頁，所以用pageInfo包了一下，成了json格式： { "data": { "endRow": 1, "firstPage": 1, "hasNextPage": false,

Vue入門學習(一)

1、引入vue.js 2、建立Vue物件 3、雙向資料繫結v-bind 4、顯示資料 {{xxx}} 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Vue原始碼學習（4）——資料響應系統

Vue原始碼學習（4）——資料響應系統：通過initData() 看資料響應系統下面，根據理解我們寫一個簡略的原始碼：參考治癒watcher在：vm.$mount(vm.$options.el) Function de

vue 根據訂單狀態排序 json資料

<template> <div id="app" style="width:300px;height:500px;overflow-y:auto;margin:0px auto;"> <div v-for="obj in

Vue 入門學習

函式 Vue元件形參 Slot,props 區域性變數和區域性函式 Data,methods 函式名 Name

vue中判斷伺服器傳遞的資料是否存在即 vue監聽一個不存在的變數

如果在專案中的某個方法中判斷伺服器端傳來的資料是否存在可以採用 typeof 屬性 == "undefined" 判斷例如 : <div v-for="(item,index) in testData" :key="index"> <div :cla

關於C#向伺服器請求json資料並解析

查了一下午+一晚上，什麼樣的回答都有，好些讓我感到十分無語。趕專案，沒總結出太高大上的用法，下面簡單講一下。請求用的GET方法 HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url); WebRespons

android客戶端+JAVA WEB伺服器實現json資料解析

import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.But

客戶端POST傳送json資料給服務端，客戶端端接收伺服器端json資料響應

public static void jsonRequest() throws IOException, URISyntaxException { //請求的地址 String url = "http://localhost:8080/springmvc/response/r

$.ajax()方法從伺服器獲取json資料幾種方式詳解

一．什麼是json json是一種取代xml的資料結構，和xml相比，它更小巧但描述能力卻很強，網路傳輸資料使用流量更少，速度更快。 json就是一串字串，使用下面的符號標註。 {鍵值對} ： json物件 [{},{},{}] ：json陣列 "" ：雙引號內是屬性或值

Android實戰簡易教程-第六十六槍（伺服器端搭建和伺服器端Json資料互動）

學習Android有一段時間了，對伺服器端有很深的好奇，決定對伺服器端的實現進行一些研究，這裡實現了一個簡單的小例子，用於獲取伺服器端的json資料，例子很簡單，適合初學者學習使用。伺服器端首先我們搭建伺服器端，伺服器端使用struct2架構，對該架構不熟悉的人可以花一點時間

Vue入門學習-使用伺服器傳來的JSON資料交給Vue渲染HTML頁面

相關推薦