一般前端与后端的互交都是通过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. PHP学习之［第01讲］开启PHP学习之路，融入新互联网时代

    小编本身现在是手机应用客户端开发者,包括iOS和Android. 学习PHP有两个目的: 1.为移动端提供服务: 2.向后台项目的架构方面学习.

  2. 来自苹果的编程语言——Swift简单介绍

    关于 这篇文章简要介绍了苹果于WWDC 2014公布的编程语言--Swift. 原文作者: Lucida Blog 新浪微博 豆瓣 转载前请保留出处链接.谢谢. 前言 在这里我觉得有必要提一下Brec ...

  3. Adding Swap Files

    Adding Swap Files If you do not have free disk space to create a swap partition and you do need to a ...

  4. 【网络流#3】hdu 1532 - Dinic模板题

    输入为m,n表示m条边,n个结点 记下来m行,每行三个数,x,y,c表示x到y的边流量最大为c 这道题的模板来自于网络 http://blog.csdn.net/sprintfwater/articl ...

  5. oop实现方法与属性继承

    <script> /*父类 Person*/ function Person(name,age){ this.name=name; this.age=age; } Person.proto ...

  6. UFLDL课程学习（二）

    章节地址:http://ufldl.stanford.edu/tutorial/supervised/LogisticRegression/ 章节名称:逻辑回归 (Logisitic Regressi ...

  7. WCF代理是怎么工作的？用代码说话

    1.WCF生成代理的方式 2.WCF代理原理 第一个问题引用 一篇Robin's博文[WCF生成客户端对象方式解析] 讲述了创建客户端服务对象的方法 1.代理构造法 a.开启服务后,添加服务引用 b. ...

  8. Namespace declaration statement has to be the very first

    Namespace declaration statement has to be the very first statement in the script 我新建了一个Homea模块,并把Hom ...

  9. smokeping报错Can't locate RRDs.pm in @INC (@INC contains

    安装完smokeping,执行debug语句: ./bin/smokeping --debug-daemon ,提示如下错误: Can't locate RRDs.pm in @INC (@INC c ...

  10. CactiEZ 中文版V10.1安装使用以及139邮箱短信报警设置

    说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合Cacti等相关软件,重新编译而成的一个操作系统!   说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合 ...