フロントエンドデータインタフェース

変換元:https://www.cnblogs.com/eco-just/p/8490972.html
くだらないことは多くありませんが、フロントエンドは通常、バックグラウンドで提供されるインタフェースを通じてデータを取得してフロントエンドページのレンダリングを完了することを知っています.
1.フロントエンドがインタフェースを介してバックグラウンドから返されるデータを呼び出す

    this is my jsp
    

    




  
    $.ajax({  
            type: "Get",  
            url: "servlet/JJJJ",  
            success: function(data){  
            $("#json").text(data);  
            }  
        })  

这是一个jsp页面：

向服务器发起了一个ajax请求，请求的地址是"servlet/JJJJ",请求成功后执行回调函数，这个data就是这个url

返回的数据，一般是一个json格式的字符串，它的根本还是一个字符串。所以前端拿到这个字符串之后，要

将它转化为json（数组）对象，然后访问这个对象的键/值，从而进行页面数据渲染。

2.后台接口（servlet）

//JJJJ.java

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("contentType", "text/html; charset=utf-8");
        PrintWriter out = response.getWriter();  
        String jsonstr = "[{\"name\": \"eco\", \"age\": \"21\"}]";
        out.print(jsonstr);
        out.flush();
        out.close();
    }

これはservletで、json形式の文字列jsonstrを定義し、フロントエンドがこのservletに対してhttpリクエストを開始すると、フロントエンドに戻ります.
個のjson文字列.この手書きのjson文字列は、中のコロンがエスケープ文字「」を使うことに注意しました.
注意:赤字固定書き方、前の2つの文は出力のjson文字列の中国語の文字化けしを防ぐためです.
3.バックグラウンドservlet内データ変換
前後のデータインタラクションの一般的なデータには2つのフォーマットがあります:json、xml;ほとんどの場合jsonです.
したがって、バックグラウンドで取得されたデータは最終的にjson文字列でフロントに応答しなければならない.バックグラウンドでデータベースからデータを取得する場合は、javaオブジェクトまたは
者javaオブジェクトリストの形式で返されます.次に、この間の変換操作を示します.
ここではjson-libツールパッケージを採用し、アドレスをダウンロードします.http://www.pc6.com/softview/SoftView_468549.htmlあ、6つのバッグをパッケージしてダウンロードして、私を雷鋒と呼んでください!!!

//java     json   

User user = new User("eco", "567568");           //java  
JSONObject json = JSONObject.fromObject(user);   //  json  
String jsonstr = json.toString();                //  json   

 

//java       json   

User user1 = new User("eco", "567568");
User user2 = new User("   ", "123123");
List list = new ArrayList();                    //    ，     user  
list.add(user1);
list.add(user2);
JSONArray array = JSONArray.fromObject(list);   //java       json    
String jsonstr = array.toString();              //json       json   

4.フロントエンドデータ変換
フロントエンドはバックグラウンドで提供されるインタフェースを介してjson文字列を取得し、次にjsonオブジェクト(リスト)に変換してからプロパティを操作します.

//json      json  

var a = JSON.parse( data );      //        

var b = $.parseJSON( data );     //jQuery     

上には、json文字列をjsonオブジェクトに変換する2つの方法があり、jQuery方式では、jQueryフレームワークを事前にインポートする必要があります.
次はjsonオブジェクトのデータアクセス方法です.

a.username;                    //a   json  ，     username   

a[1].username;                 //a   json    ，        username   

5.フロントエンドはパラメータを含むajax要求を開始する

  
    $.ajax({  
            type: "Get",  
            url: "servlet/JJJJ", 
            data:{username:"eco",password:"23423"},
            success: function(data){ 
            var a = JSON.parse(data); 
            $("#json").text(a.username);  
            }  
        })  

フロントエンドはajaxリクエストをサーバに送信し、requestにパラメータを提供します.ここには2つのdataがあります.
最初の赤いdataは、フロントエンドがリクエストを開始する際に付随するパラメータであり、
2番目の金色dataはバックグラウンドで返されるデータ(json文字列)です.

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("contentType", "text/html; charset=utf-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        User user = new User(username, password); 
        JSONObject json = JSONObject.fromObject(user); 
        String jsonstr = json.toString();
        out.print(jsonstr);
        out.flush();
        out.close();
    }

バックグラウンドのこのservletはフロントエンドの要求を受け取った後、まずrequestの中のParameterを取得し、それから属性値をUserオブジェクトに割り当てます.
JAvaオブジェクト->jsonオブジェクト->json文字列、最後にjson文字列をフロントエンドに返します.
後ろのは私が言うまでもありません.
さらに多くの場合、上記のようにフロントrequestから渡されたパラメータをデータベースクエリの条件として使用するわけではありません.
クエリー結果(javaオブジェクトリスト)を処理(json文字列に変換)してフロントエンドに戻し、フロントエンドでページをレンダリングします.