ajax 呼び出し安らかなインターフェイス

HTTP動詞	対応操作
役職	新情報
得る	情報を教えてもらう
置く	更新情報
消去	メッセージを削除

 

1. POST-----新着情報
1. 背景インターフェース

@PostMapping(value = "/save")
public String save(@RequestBody(required = true) Emp emp){
    System.err.println(emp.toString());
    // 将数据信息存库
    empService.saveEmp(emp);
    return "Object Save to DB!!!";
}

@PostMapping アノテーションを使用するということは、インターフェースを POST モードで要求する必要があることを意味します。

@RequestBody アノテーションを使用するということは、インターフェースを要求するときの入力パラメーターが JSON 形式のデータでなければならないことを意味します。

2. ajax リクエスト

        let parms = {"id": "1001","name":"爱吃红豆的猫"};
        $.ajax({
            url:'/save',
            data: JSON.stringify(parms),
            type:'POST',
            dataType:'text',// 返回数据类型，因为后台返回的不是json格式的数据，所以如果这里使用json，则前台控制台打印的会是2，而不是1;
            contentType:"application/json;charset=UTF-8",
            success:function(data) {
                console.log(1)
            },
            error:function(data) {
                console.log(2)
            }
        })

バックグラウンド インターフェイスは @PostMapping アノテーションを使用するため、ajax の type 属性は POST でなければなりません。

バックグラウンド インターフェイスは @RequestBody アノテーションを使用するため、ajax データは json 形式である必要があるため、JSON.stringify() を使用してデータを json 形式の文字列に変換する必要があります。

同時に、デフォルトは「application/x-www-form-urlencoded;charset=UTF-8」であるため、contentType を「application/json;charset=UTF-8」として指定する必要があります。

2. GET-----情報を取得する
1. バックグラウンド インターフェイス

@GetMapping(value = "/restful/{id}/{orderindex}")
public String info(@PathVariable(required = true) String id, @PathVariable(required = true) long orderindex){
    BoTaskPlan boTaskPlan = new BoTaskPlan();
    boTaskPlan.setId(id);
    boTaskPlan.setOrderindex(orderindex);
    BoTaskPlan bo = this.service.getOne(boTaskPlan);
    return bo.toString();
}

@GetMapping アノテーションを使用するということは、インターフェースを GET モードで要求する必要があることを意味します。

@PathVariable アノテーションを使用すると、インターフェースを要求するときの入力パラメーターが URI にあることを意味します (URI は、http とドメイン名または IP ポートを除く URL の一部です)。

2. ajax リクエスト

        let id = "1001";
        let orderindex = "7";
        $.ajax({
            url:'/restful/' + id + "/" + orderindex,
            type:'GET',
            dataType:'json',
            contentType:"application/json;charset=UTF-8",
            success:function(data) {
                console.log(1)
            },
            error:function(data) {
                console.log(2)
            }
        })

バックグラウンド インターフェイスは @GetMapping アノテーションを使用するため、ajax の type 属性は GET でなければなりません。

@PathVariable アノテーションがバックグラウンドで使用されるため、パラメーターは以前のように? の後ではなく、URL の「/」の後に直接配置されます。

3. PUT-----更新情報
1. 背景コード

@PutMapping(value = "/restful")
public String update(@RequestBody(required = true) BoTaskPlan bo){   // 使用@PathVariable获取{XXX}中的XXX变量值
    // 更新数据
    service.updateById(bo);
    // 查询数据
    bo = service.getOne(bo.getId());
    return bo.toString();
}

@PutMapping アノテーションを使用するということは、PUT メソッドを使用してインターフェースを要求する必要があることを意味します。

バックグラウンド インターフェイスは @RequestBody アノテーションを使用するため、ajax データは json 形式である必要があるため、JSON.stringify() を使用してデータを json 形式の文字列に変換する必要があります。

2. ajax リクエスト

        let arr = {"createuser":"admin","id":"1002"};
        $.ajax({
            url:'/restful',
            data: JSON.stringify(arr),
            type:'PUT',
            dataType:'json',    
            contentType:"application/json;charset=UTF-8",
            success:function(data) {
                console.log(1)
            },
            error:function(data) {
                console.log(2)
            }
        })

バックグラウンド インターフェイスは @PutMapping アノテーションを使用するため、ajax の type 属性は PUT でなければなりません。

@RequestBody はバックグラウンドで使用されるため、ajax のデータは json 文字列でなければなりません

4. DELETE-----情報の削除
1. バックグラウンド コード

@DeleteMapping(value = "/restful/{id}")
public String delete(@PathVariable(required = true) String id){   // 使用@PathVariable获取{XXX}中的XXX变量值
    // 删除信息
    service.deleteById(id);
    // 查询所有信息
    List<BoTaskPlan> list = service.getAll();
    return list.toString();
}

@DeleteMapping アノテーションを使用するということは、インターフェースを DELETE モードで要求する必要があることを意味します。

@PathVariable アノテーションを使用すると、インターフェースを要求するときの入力パラメーターが URI にあることを意味します (URI は、http とドメイン名または IP ポートを除く URL の一部です)。

2. ajax リクエスト

        $.ajax({
            url:'/restful/22311',
            type:'DELETE',
            dataType:'json',    
            contentType:"application/json;charset=UTF-8",
            success:function(data) {
                console.log(1)
            },
            error:function(data) {
                console.log(2)
            }
        })

バックグラウンド インターフェイスは @DeleteMapping アノテーションを使用するため、ajax の type 属性は DELETE でなければなりません。

@PathVariable アノテーションがバックグラウンドで使用されるため、パラメーターは以前のように? の後ではなく、URL の「/」の後に直接配置されます。

AJAX はドメイン間で RESTFUL インターフェイスを呼び出します

1. JSONP メソッドの
フロントエンド コード:

let patientInfoURL = 'http://10.1.8.82:8332/soap/GetPatInfo?citycardno=0000997144446894&id=32010600000002012';
$.ajax({
     type:'get',
     url: patientInfoURL ,
     dataType:'jsonp',
     //jsonp:'callback',//默认就是callback，可以不写
     //jsonpCallback:"successCallback",//此处定义请求url中callback参数后的值，不写则jQuery会自动生成一个字符串
     success:function(data){
        console.log(data);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown){
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
     }
 });

Ajax クロスドメイン リクエストの場合、ブラウザはリクエストされた URL の後に 2 つのパラメータを自動的に追加します。1 つは key=callback で、もう 1 つは key=_ です。最初のキーのコールバックの値は、j​​sonp:'callback' で変更できます。デフォルトは callback です。2 番目のキーの目的は不明であり、使用には影響しません

• jsonp のコールバック名をカスタマイズします (つまり、jsonpCallback: "successCallback" を使用)。

• jsonp のコールバック名はカスタマイズされていません (つまり、jsonpCallback: "successCallback" なし)。 

 コードビハインド

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

フロントエンド リクエスト URL の param のキーを callback の値として取得することで、コールバック関数名を取得します。 

2. CORS メソッド
の紹介:

CROS は現在、クロスドメインの問題に対する主流のソリューションであり、今後のトレンドになると推定されています。

Cross-Origin Resource Sharing  (CORS) は、ドメイン間でリソースにアクセスするときにブラウザーとサーバーが通信する方法を定義する W3c 作業草案です。CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用してブラウザーとサーバーが相互に理解し、要求または応答が成功したかどうかを判断できるようにすることです。

CORS メソッドの Ajax クロスドメイン リクエストは、通常の非クロスドメイン Ajax リクエストと同じように見えます。これも CORS 方式の一部です。行われる作業は非クロスドメインと変わりません。主な違いはバックエンド コードにあります。

バックグラウンド コード: 

// 跨域配置
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Max-Age", "3600"); // 保持跨域Ajax时的Cookie
response.setHeader("Access-Control-Allow-Headers", "x-auth-token, x-requested-with,Authorization,Origin, Accept, Content-Type,x-xsrf-token");