一般前端与后端的互交都是通过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. 在SQL中使用自定义函数

      由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并 ...

  2. VMware Ubuntu安装详细过程

    参考链接: http://blog.csdn.net/u013142781/article/details/50529030

  3. win8.1 Dism 应用实例

    使用win8.1安装镜像制作wimboot启动 制作wim启动映像文件 Dism /Export-Image /WIMBoot/SourceImageFile:z:\sources\install.w ...

  4. rsync+inotify实现服务器之间文件实时同步--转

    之前做了“ssh信任与scp自动传输脚本”的技术文档,此方案是作为公司里备份的方法,但在实际的运行中,由于主服务器在给备份服务器传输的时候,我们的主服务器需要备份的文件是实时.不停的产生的,造成不知道 ...

  5. NOI2015 程序自动分析

    /* 十分简单的题面 离散化一下 然后并茶几一下就OK了 跑的死慢 可能还有更优的方法吧 */ #include<iostream> #include<cstdio> #inc ...

  6. 在公网上布署Web Api的时候，不能调用，返回404

    在internet上布署web API做的站点时,发现不能调用web api的任何action, 返回404. 经过很多的努力,也找不到原因,环境是win server 2008, IIS 75. n ...

  7. Linq使用GroupBy筛选数据

    StringBuilder sb = new StringBuilder(); List<IGrouping<string, modle>> listRepeat = mode ...

  8. GET方式，获取服务器文件

    package com.http.get; import java.io.FileOutputStream; import java.io.IOException; import java.io.In ...

  9. JavaScript 显示弹出窗口(二)

    window. open ( sURL , sName , sFeatures , bReplace ) sURL:可选项,被加载页面的html sName:可选项,指定打开的窗口的名字 _media ...

  10. 高放的c++学习笔记之关联容器

    标准库提供8个关联容器 按关键字有序保存有(红黑树实现) set map multset 关键字可重复出现的set multimap  关键字可重复出现的map 无序保存 哈希实现 unorderre ...