一般前端与后端的互交都是通过json字符串来互交的，我的理解就是与网页接口的来回数据传递采用的数据结构就是json。一般是这样。
比如后端的代码是这样的：
@RequestMapping(value = "quartz/list", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody String listQuartz(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); String json;
List<DDSProduct> products = new ArrayList<DDSProduct>(); try { conn = connPool.getConnection(); Statement stmt = conn.createStatement();
// Create a result set object for the statement
ResultSet rs = stmt.executeQuery("SELECT jobID,filePath FROM NwfdDDSDetail"); while (rs.next()) {
DDSProduct product = new DDSProduct();
product.setJobID(Integer.parseInt(rs.getString("jobID")));
product.setFilePath(rs.getString("filePath")); products.add(product); }
connPool.freeConnection(conn); } catch (Exception e) {
e.printStackTrace();
} Gson g = new Gson(); json = g.toJson(products); return json; }
由上面代码可以看出，后端Servlet的一个函数在接收到该网页的http的GET请求后，立即用JDBC向数据库取出了相关的信息，并转换成json字符串，向这个网页接口返回这个json串，如果前端不采取任何措施，这样的数据是让用户让用户看不懂的，前端的作用就是获取这些json数据，把他解析出来（js原生就支持解释json），根据js和html和CSS把它用适当的形式展现出来，这是一个前后端基本的互交流程.下面是一个前端请求后端数据并展现的一个过程：
<html>
<head>
<title>Show Product List</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">
</script> </head>
<body>
<h2>Hello World!</h2>
<div id="result" style="color:red"></div>
<script>
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
}; getJSON('http://localhost:8080/MQDispatch/mq/quartz/list').then(function(data) {
alert('Your Json result is: ' + data); //you can comment this, i used it to debug var html = '<ul>';
for (var i = 0; i < data.length; i++) {
html += '<li>' + 'jobID is:'+data[i].jobID + ', file path is' +data[i].filePath + '</li>';
}
html += '</ul>'; document.getElementById('result').innerHTML = html; //display the result in an HTML element
}, function(status) { //error detection....
alert('Something went wrong.');
}); </script> </body>
</html>
后端可以看到，js向该接口做出请求，并用回调函数取出了返回的数据，并把它解析为一个<ul>，放入div块中。之后还可以做更复杂的展示，这只是一个例子。
references:
http://*.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://*.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