一般前端与后端的互交都是通过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. ubuntu环境配置

    网络配置 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network interfaces av ...

  2. OpenStack Networking

    今天的数据中心网络比以往不论什么时候包括的设备都要多,比如server.网络设备.存储系统和安全设备等.这当中有非常多被近一步划分为多个虚拟机和虚拟网络.IP地址的数量.路由配置和安全规则能够迅速达到 ...

  3. 【转】Android:Touch事件分发机制

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...

  4. 超好用文件对比工具 – Beyond Compare

    超好用文件对比工具 – Beyond Compare,开发中文件.目录对比神器,有了它,再也不用为找不到修改的内容而发愁了. 具备的丰富实用功能: 并列比较文件夹.FTP 网站或 Zip 文件: 为以 ...

  5. HTTPS 详解

    1) HTTPS是什么 https 是超文本传输安全协议的缩写.HTTPS主要思想是在不安全的网络上创建一种安全的信道,并且可以在使用适当的加密包和服务器证书可被验证且可被信任时候,对窃听和中间人攻击 ...

  6. Linux 字符集

    摘抄自网络--/etc/sysconfig/i18n 文件:LANG="zh_CN.GB18030"SUPPORTED="zh_CN.GB18030:zh_CN:zh:e ...

  7. 将图片转换为Base64

    string Imagefilename   硬盘路径 protected string ImgToBase64String(string Imagefilename) { try { Bitmap ...

  8. xAML中一些控件的用法学习

    首先,介绍一些比较简单的设计,这些可以直接通过拖拽实现.如下例子: <Window x:Class="wpf1.MainWindow" xmlns="http:// ...

  9. 摘抄官方文档： spring boot配置 iframe同源可访问

    使用java配置,跟spring security配置在一起 @EnableWebSecurity public class WebSecurityConfig extends WebSecurity ...

  10. 武汉科技大学ACM ：1001: 华科版C语言程序设计教程（第二版）课后习题3.12

    Problem Description 输入n,输出对应的边长为n的空心正六边形. 为方便看图,样例中点 '.' 表示空格,打印图形时请打印空格而非小圆点. Input 边长n.(n<=20) ...