一般前端與后端的互交都是通過json字符串來互交的，我的理解就是與網頁接口的來回數據傳遞采用的數據結構就是json。一般是這樣。
比如后端的代碼是這樣的：
1 @RequestMapping(value = "quartz/list", method = RequestMethod.GET, produces = "application/json") 2 public @ResponseBody String listQuartz(HttpServletRequest request, HttpServletResponse response) { 3 4 response.setContentType("application/json"); 5 6 String json; 7 List<DDSProduct> products = new ArrayList<DDSProduct>(); 8 9 try { 10 11 conn = connPool.getConnection(); 12 13 Statement stmt = conn.createStatement(); 14 // Create a result set object for the statement 15 ResultSet rs = stmt.executeQuery("SELECT jobID,filePath FROM NwfdDDSDetail"); 16 17 while (rs.next()) { 18 DDSProduct product = new DDSProduct(); 19 product.setJobID(Integer.parseInt(rs.getString("jobID"))); 20 product.setFilePath(rs.getString("filePath")); 21 22 products.add(product); 23 24 } 25 connPool.freeConnection(conn); 26 27 28 } catch (Exception e) { 29 e.printStackTrace(); 30 } 31 32 Gson g = new Gson(); 33 34 json = g.toJson(products); 35 36 return json; 37 38 }
由上面代碼可以看出，后端Servlet的一個函數在接收到該網頁的http的GET請求后，立即用JDBC向數據庫取出了相關的信息，並轉換成json字符串，向這個網頁接口返回這個json串，如果前端不采取任何措施，這樣的數據是讓用戶讓用戶看不懂的，前端的作用就是獲取這些json數據，把他解析出來（js原生就支持解釋json），根據js和html和CSS把它用適當的形式展現出來，這是一個前后端基本的互交流程.下面是一個前端請求后端數據並展現的一個過程：
1 <html> 2 <head> 3 <title>Show Product List</title> 4 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"> 5 </script> 6 7 8 </head> 9 <body> 10 <h2>Hello World!</h2> 11 <div id="result" style="color:red"></div> 12 <script> 13 var getJSON = function(url) { 14 return new Promise(function(resolve, reject) { 15 var xhr = new XMLHttpRequest(); 16 xhr.open('get', url, true); 17 xhr.responseType = 'json'; 18 xhr.onload = function() { 19 var status = xhr.status; 20 if (status == 200) { 21 resolve(xhr.response); 22 } else { 23 reject(status); 24 } 25 }; 26 xhr.send(); 27 }); 28 }; 29 30 getJSON('http://localhost:8080/MQDispatch/mq/quartz/list').then(function(data) { 31 alert('Your Json result is: ' + data); //you can comment this, i used it to debug 32 33 34 var html = '<ul>'; 35 for (var i = 0; i < data.length; i++) { 36 html += '<li>' + 'jobID is:'+data[i].jobID + ', file path is' +data[i].filePath + '</li>'; 37 } 38 html += '</ul>'; 39 40 41 document.getElementById('result').innerHTML = html; //display the result in an HTML element 42 }, function(status) { //error detection.... 43 alert('Something went wrong.'); 44 }); 45 46 </script> 47 48 </body> 49 </html>
后端可以看到，js向該接口做出請求，並用回調函數取出了返回的數據，並把它解析為一個<ul>，放入div塊中。之后還可以做更復雜的展示，這只是一個例子。
references:
http://stackoverflow.com/questions/9922101/get-json-data-from-external-url-and-display-it-in-a-div-as-plain-text
http://www.cnblogs.com/etindex/archive/2009/03/10/1408210.html
http://stackoverflow.com/questions/17620654/getting-data-from-a-json-url-and-displaying-it-in-html-with-javascript-jquery?rq=1
http://baike.baidu.com/link?url=7iy69iOZvqMJzn0aoytKsFCwr4pzXDDS_U-pStxdOd5EdSaCg_apCP7jXUqXme5rse463WOzqU9_flsh10d3G_ （jsonp百科）
http://baike.baidu.com/link?url=QdtzWyRqUDvO1zR9TI_YDGPf1baL73RB7j2ASd_abck2CJLgmvJeU1qm0zU1HdxFUhl4mv6_UsvJ_9jYo4TednOtZMgF3iOslwTxGYxbO_O (Ajax百科)
https://www.quora.com/How-does-a-frontend-code-and-a-backend-code-interact-with-each-other