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

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

阅读量：6417 次

发布时间：2019-06-23

本文共 2414 字，大约阅读时间需要 8 分钟。

一般前端与后端的互交都是通过json字符串来互交的，我的理解就是与网页接口的来回数据传递采用的数据结构就是json。一般是这样。

比如后端的代码是这样的：

1 @RequestMapping(value = "quartz/list", method = RequestMethod.GET, produces = "application/json") 2     public @ResponseBody String listQuartz(HttpServletRequest request, HttpServletResponse response) { 3  4         response.setContentType("application/json"); 5  6         String json; 7         List
      
        products = new ArrayList
       
        (); 8  9         try {10 11             conn = connPool.getConnection();12 13             Statement stmt = conn.createStatement();14             // Create a result set object for the statement15             ResultSet rs = stmt.executeQuery("SELECT jobID,filePath FROM NwfdDDSDetail");16 17             while (rs.next()) {18                 DDSProduct product = new DDSProduct();19                 product.setJobID(Integer.parseInt(rs.getString("jobID")));20                 product.setFilePath(rs.getString("filePath"));21 22                 products.add(product);23 24             }25             connPool.freeConnection(conn);26 27 28         } catch (Exception e) {29             e.printStackTrace();30         }31 32         Gson g = new Gson();33 34         json = g.toJson(products);35 36         return json;37 38     }

View Code

由上面代码可以看出，后端Servlet的一个函数在接收到该网页的http的GET请求后，立即用JDBC向数据库取出了相关的信息，并转换成json字符串，向这个网页接口返回这个json串，如果前端不采取任何措施，这样的数据是让用户让用户看不懂的，前端的作用就是获取这些json数据，把他解析出来（js原生就支持解释json），根据js和html和CSS把它用适当的形式展现出来，这是一个前后端基本的互交流程.下面是一个前端请求后端数据并展现的一个过程：

1  2  3  Show Product List 4   6   7   8  9 10 Hello World!
11 
      
12 47 48 49

View Code

后端可以看到，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

转载于:https://www.cnblogs.com/foohack/p/5053084.html

你可能感兴趣的文章