一般前端与后端的互交都是通过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://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

用javascript向一个网页连接接口发送请求，并接收该接口返回的json串的更多相关文章

  1. javascript实现select菜单／级联菜单（用Rails.ajax实现发送请求，接收响应）

    在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么? 功能设置: 当选择省select菜单后,市的select菜单为这个省的城市列. 当选择市菜单后,区菜单 ...

  2. Android HTTP实例 发送请求和接收响应

    Android HTTP实例 发送请求和接收响应 Android Http连接 实例:发送请求和接收响应 添加权限 首先要在manifest中加上访问网络的权限: <manifest ... & ...

  3. 使用HttpClient发送请求、接收响应

    使用HttpClient发送请求.接收响应很简单,只要如下几步即可. 1.创建HttpClient对象.  CloseableHttpClient httpclient = HttpClients.c ...

  4. consumer发送请求，接收响应

    一般情况,consumer发送请求时,创建一个DefaultFuture对象,然后阻塞并等待响应.DefaultFuture类,封装了请求和响应: // 省略其他代码 public class Def ...

  5. RestTemplate发送请求并携带header信息 RestTemplate post json格式带header信息

    原文地址:  http://www.cnblogs.com/hujunzheng/p/6018505.html RestTemplate发送请求并携带header信息   v1.使用restTempl ...

  6. javascript 实现一个网页，然后计算出有多少剩余时间的倒计时程序

    function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year ...

  7. python 统计发送请求到接收response的时间

    由于需要测试请求一个接口所耗用的时间,在网上查找资料也麻烦,所以自己总结一下 找到elapsed 函数 ,按照文档说的是获取请求发出的时间至响应到达经过的时间,,具体用法如下: 执行的结果是 微秒 单 ...

  8. WebRequest发送请求并接收返回值

    public string getXmlStr(string hphmcode)         {            string Url = "http://localhost:80 ...

  9. 可能会搞砸你的面试：你知道一个TCP连接上能发起多少个HTTP请求吗？

    本文由原作者松若章原创发布,作者主页:zhihu.com/people/hrsonion/posts,感谢原作者的无私分享. 1.引言 一道经典的面试题是:从 URL 在浏览器被被输入到页面展现的过程 ...

随机推荐

  1. Flask 中的 SQLAlchemy 使用教程

    Flask 是一个 python web micro framework.所谓微框架,主要是 flask 简洁与轻巧,自定义程度高.相比 django 更加轻量级. 之前一直折腾 django,得益于 ...

  2. javascript对链接进行动态处理化

    // $(function(){// var aLink=$('.nav-content .nav li a'); // 选中所有a// var aText=['在线搭配','星网学院','推客联盟' ...

  3. UINavigationController 导航控制器 ，根据文档写的一些东西

    今天讲了导航控制器UINavigationController 和标签栏视图控制器UITabBarController 先来说一说导航视图控制器  UINavigationController 导航控 ...

  4. [AngularJS] Using $parse Service

    $parse is useful when you want to parse an expression and the context is not defined yet. For exampl ...

  5. 关于linux内存管理

     Linux的内存管理主要分为两部分:物理地址到虚拟地址的映射,内核内存分配管理(主要基于slab). 物理地址到虚拟地址之间的映射 1.概念 物理地址(physical address) 用于内存芯 ...

  6. redis 控制调用频率

    redis提供了rate limit demo 如下所示: INCR key Available since 1.0.0. Time complexity: O(1) Increments the n ...

  7. JavaScript基础（一）

    JavaScript一.什么是JavaScript?脚本描述语言,网页交互特效,说白了,就是实现HTML实现不了的效果.(JavaScript是一种基于对象.事件驱动的简单脚本语言,嵌入在HTML文档 ...

  8. json数组传递到后台controller

    现前台有如下格式的数据需要传递到后台的controller, public class UpdatePara { public int RoleID { get; set; } public List ...

  9. Android开发手记(14) 使用MediaPlayer播放mp3

    1.获取MediaPlayer实例 (1)可以直接通过new或者create方式: 调用setDataSource和create的区别是,create时已经执行了MediaPlayer.prepare ...

  10. MySQL REPLACE替换输出

    原输出: [root@ARPGTest ~]# mysql -p`cat /data/save/mysql_root` pro_manager -e'select erlang_script,sql_ ...