2. 程式人生 > >後臺傳的json 資料遍歷到HTML 頁面

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

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

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

1、HTML頁面

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <metacharset="utf-8">
  5.     <title>xx資訊查詢</title>
  6.     <scripttype="text/javascript"src="/js/jquery-1.11.3.min.js"></script>
  7.     <scripttype="text/javascript"
    src="/js/ai/ai-lib.js"></script>
  8.     <scriptsrc="/js/cheat-order.js"></script>
  9. </head>
  10. <body>
  11. <divclass="main pusher">
  12.     <formclass="ui form vertical segment form-search">
  13.         <divclass="fields">
  14.             <divclass="halfsixCl wide field js_query_date">
  15.                 <labelfor="checkDate">預定截止日期</label>
  16.                 <inputname="checkDate"type="text"id="checkDate">
  17.             </div>
  18.             <divclass="sixCl wide field">
  19.                 <label>SEQ</label>
  20.                 <inputname="hotelSeq"id="hotelSeq"
    placeholder=""type="text">
  21.             </div>
  22.             <divclass="sixCl wide field js_query_seq">
  23.                 <label>訂單號</label>
  24.                 <inputtype="text"maxlength="50"name="orderNo"id="orderNo"placeholder="">
  25.             </div>
  26.             <divclass="sixCl wide field js_query_btype">
  27.                 <label>排序欄位</label>
  28.                 <selectname="sortFiled"id="sortFiled">
  29.                     <optionvalue="hotel_seq">酒店seq</option>
  30.                     <optionvalue="order_no">訂單號</option>
  31.                     <optionvalue="cellid">cellid</option>
  32.                 </select>
  33.             </div>
  34.             <div>
  35.                 <label></label>
  36.                 <inputtype="button"value="搜尋"id="btSearch"class="ui right floated positive button btn-search"/>
  37.             </div>
  38.         </div>
  39.     </form>
  40.     <divclass="table-container">
  41.         <tableclass="ui nine column table celled table-result"id="table-result">
  42.             <thead>
  43.             <tr>
  44.                 <th>hotelSeq</th>
  45.                 <th>酒店名稱</th>
  46.                 <th>訂單號</th>
  47.                 <th>聯絡人手機號</th>
  48.                 <th>預定時間</th>
  49.                 <th>userId</th>
  50.                 <th>cellid</th>
  51.                 <th>gps定位城市</th>
  52.                 <th>wifi定位城市</th>
  53.                 <th>定位距離</th>
  54.             </tr>
  55.             </thead>
  56.             <tbodyid="tbody-result">
  57.             </tbody>
  58.         </table>
  59.     </div>
  60. </div>
  61. </body>
  62. </html>

2、cheat-order.js [javascript] view plain copy
  1. $(function () {  
  2.     $('#btSearch').click(function () {  
  3.         var checkDate = $('#checkDate').val();  
  4.         var orderNo = $('#orderNo').val();  
  5.         var sortFiled = $('#sortFiled').val();  
  6.         var hotelSeq = $('#hotelSeq').val();  
  7.         var tbody=window.document.getElementById("tbody-result");  
  8.         $.ajax({  
  9.             type: "post",  
  10.             dataType: "json",  
  11.             url: "ac/order/queryCheatOrder",  
  12.             data: {  
  13.                 hotelSeq: hotelSeq,  
  14.                 orderNo: orderNo,  
  15.                 sortFiled: sortFiled,  
  16.                 checkDate: checkDate  
  17.             },  
  18.             success: function (msg) {  
  19.                 if (msg.ret) {  
  20.                     var str = "";  
  21.                     var data = msg.data;  
  22.                     for (i in data) {  
  23.                         str += "<tr>" +  
  24.                         "<td>" + data[i].hotel_seq + "</td>" +  
  25.                         "<td>" + data[i].hotel_name + "</td>" +  
  26.                         "<td>" + data[i].order_no + "</td>" +  
  27.                         "<td>" + data[i].user_phone + "</td>" +  
  28.                         "<td>" + data[i].create_time + "</td>" +  
  29.                         "<td>" + data[i].user_id + "</td>" +  
  30.                         "<td>" + data[i].cellid + "</td>" +  
  31.                         "<td>" + data[i].gps_city + "</td>" +  
  32.                         "<td>" + data[i].cell_city + "</td>" +  
  33.                         "<td>" + data[i].distance + "</td>" +  
  34.                         "</tr>";  
  35.                     }  
  36.                     tbody.innerHTML = str;  
  37.                 }  
  38.             },  
  39.             error: function () {  
  40.                 alert("查詢失敗")  
  41.             }  
  42.         });  
  43.     });  
  44. });  

3、示例圖

備註：css已經刪除了，效果比上面示例圖要差些

原創作品，允許轉載，轉載時請務必以超連結形式標明文章 原始出處 、作者資訊和本宣告

相關推薦

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

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

前臺向後臺傳json資料

 做記錄 var personData = { name : $('#name').val(), phone : $('#phone').val(), type : $('#type').val(), }; //傳參時 data：{ personJson：

jquery ajax json 資料 遍歷

後臺返回的資料 ： {"receiveList":[{"receive_dept_id":"1007873","receive_dept_desc":"區公司領導","guid":"2016112316042622494230","receive_platform_id":

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

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

freemarker網頁靜態化生成靜態頁面，資料遍歷，freemarker編輯器

如果eclipse中沒有freemarker編輯器，開啟頁面是這樣的。 頁面中都是黑色，不好看是不是 可以下載一個freemarker編輯器,在eclipse中, Help–>Eclipse MarketPlace 搜尋freemarker,選擇Freemarker IDE fr

JQuery通過後臺獲取資料遍歷到前臺

做專案中，經常會通過呼叫後臺介面把資料顯示到前臺頁面上來，之前遇到過的問題是，前臺頁面是用ul+li標籤寫的，在呼叫介面除錯時發現返回的資料有很多組的，而在前臺顯示的時候只有一條資料，毋容置疑，一定是遍歷時出現了問題，下面來簡單分析下。 前臺程式碼： 案例1： <div cla

靜態頁面中如何傳json資料

首頁傳遞引數組裝成json資料，再編碼 var param="{type:'"+type+"',text:'"+select_text+"',select_:'"+select_+"',typename:'"+typename+"'}"; window.self.location="/"+Se

SpringMVC的controller向jsp頁面傳json資料

          需要匯入這三個jar包                            需要在spring.xml檔案新增  <!-- 啟動註解 --> <mvc:anno

Jsp頁面傳Json資料到服務端，轉物件或集合進行資料處理

需求：1、將頁面資料帶到服務端並轉成物件，2、將頁面的集合資料帶到服務端轉List 實現：用ajax請求傳遞資料，資料格式為json JS方法： testJsonMethod = function(

JQuery ajax 把後臺返回的List資料 遍歷出來 賦值給div

1、效果 2、前端程式碼 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-T

用Springmvc 返回json資料，填充html 或 jsp頁面。

maven pom.xml: <!-- net json --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId&g

struts2-通過action從後臺將json資料傳到前臺的方法(一)

本方法通過Struts2的攔截器自動將資料轉換成json資料後傳給頁面。 需要匯入的jar包：struts2-json-plugin-2.3.20.jar 前臺jsp頁面： <table id="dg" title="My Users" class="easyui-

springMvc中前臺ajax傳json資料後臺controller接受物件為null

一般地，出現這種情況很大一部分原因是對ajax中的引數作用不熟悉或者對@RequestBody註解不熟悉。 在jquery的ajax中，如果沒加contentType:"application/json"，那麼data就應該對應的是json物件，反之，如果加了content

java web SpringMVC後端傳json資料到前端頁面

下面的後臺的程式碼：目的的查詢資料庫中的所有省的列表，然後轉化為json傳到前端頁面@Controller public class DistrictController { @Resource

spring後臺返回json資料 頁面406錯誤 Not Acceptable解決

使用SpsringMVC，controller請求設定如下： Java程式碼   @RequestMapping(value="/list",method=RequestMethod.GET,produces=MediaType.APPLICATION_JSON_VA

將資料庫裡面的資料遍歷出來顯示在jsp頁面

jdp頁面的全選或者反選 //全選、全反選 function doSelectAll(){ // jquery 1.6 前 //$("input[name

Python 通過lxml遍歷html xpath

items ted windows cli XML sleep -a header Coding #coding:utf-8 ‘‘‘ Created on 2017年10月9日 @author: li.liu ‘‘‘ from selenium import webdr

循環遍歷html所有元素

循環遍歷html所有元素 function loadNode(node){ for(var i=0;i<node.childNodes.length;i++){ if(node.childNodes[i].nodeType === 1 &&

AJAX資料遍歷輸出

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

php檔案分類上傳以及前端遍歷顯示

      個人第一篇部落格，所以多囉嗦幾句吧。心情真的是非常激動！！為什麼寫這個，是因為之前的專案需要 ，百度只有檔案上傳的程式碼，沒有找到分類的，多半也沒有顯示，好幾次去易動學院請教大神，又得到實驗室大佬指點，終於實現了功能，於是馬上寫下這篇文章。此時