用javascript向一个网页连接接口发送请求，并接收该接口返回的json串

时间：2022-01-22 17:02:45

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

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

  1. javascript实现select菜单／级联菜单（用Rails&period;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. iOS学习笔记总结整理

    来源:http://mobile.51cto.com/iphone-386851_all.htm 学习IOS开发这对于一个初学者来说,是一件非常挠头的事情.其实学习IOS开发无外乎平时的积累与总结.下 ...

  2. 基于CSS3图片可倾斜摆放的动画相册

    今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...

  3. HUST 1017 Exact cover &lpar;Dancing links&rpar;

    1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 6110 次提交 3226 次通过 题目描述 There is an N*M matrix with only 0 ...

  4. OC版贪吃蛇

    昨天写了一个js版贪吃蛇,今天突然想写一个OC版的,来对比一下两种语言的区别 oc版功能,适配所有尺寸iphone,可暂停,可设置地图和蛇的比例,可加速 对比一下会发现js版的相对OC版的会简单一些, ...

  5. Ajxa验证用户和二级联动的实例&lpar;五&rpar;

    验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  6. Python C&sol;C&plus;&plus; 拓展使用接口库&lpar;build-in&rpar; ctypes 使用手册

    Python C/C++ 拓展使用接口库(build-in) ctypes 使用手册 ctypes 是一个Python 标准库中的一个库.为了实现调用 DLL,或者共享库等C数据类型而设计.它可以把这 ...

  7. web 给大家分享一个好玩的东西，也许你那块就用的到

    先看效果: 就这个效果.当你点击右上角的删除按钮,会删除掉item1. 上代码: <!DOCTYPE html> <html> <head> <meta ch ...

  8. opencv配置过程 （cmake，vs2013，qt 5&period;4）

    平台及软件: Windows 7 X86 Visual Studio 2013 OpenCV3.0.0 Cmake3.3 1.下载Windows下的安装文件OpenCV-3.0.0.exe,解压,选择 ...

  9. Spring Cloud Zuul 1（API 网关服务）

    API网关是一个更为智能的应用服务器,它的存在就像是整个微服架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤. 它实现的功能包括:请求路由.负载均衡.校验过滤等功能. Spring ...

  10. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

相关文章