Ajax フロントエンドおよびバックエンドのクロスドメイン要求処理メソッド-jsチュートリアル-php.cn

この記事では、Ajax フロントエンドのクロスドメイン要求処理とバックエンドのクロスドメインデータ処理方法を紹介し、Ajax フロントエンドとバックエンドについて学ぶ必要がある Ajax クロスドメインの問題を詳細に分析します。 -end クロスドメイン要求処理メソッドについては、この記事を参照してください。

最近、私はパブリックアカウントのフロントエンド開発に取り組んでおり、地域内の州、市、郡の 3 レベルのリンクなど、Ajax クロスドメインリクエストの問題に遭遇しました。車のブランド-車シリーズ-車種などの連携クエリはすべて外部から呼び出す必要があり、インターフェース（他のエンジニアリングプロジェクトとのインターフェース）が完成します。もちろん、バックグラウンドプログラマーの助けを借りて、それを急いで記録し、ゆっくりと蓄積していきましたので、クロスドメインリクエストに対する私の個人的な解決策を共有します。コメントや提案も積極的にお寄せください。

クロスドメインリクエストは、バックグラウンドコードを使用してコールバックコールバック関数を受信し、jsonデータをさらに処理する必要があります。その後、フロントエンドはajaxリクエストを使用してコールバックパラメータをサーバーに送信し、データ形式をjsonpとして指定します。

1. バックグラウンドでクロスドメインリクエストを処理します

1.CarBrandController.java (自動車ブランドインターフェイス Java ファイル)、ここにリストされているメソッドは主に、さまざまなレベル値に基づいて対応するブランド、自動車シリーズ、自動車モデルをクエリするために使用されます。ここで、コールバック関数はクロスドメインリクエストに対して処理されます。返されたコールバックが null でない場合は、特別な処理は必要ありません。 null の場合、クロスドメインリクエストを示します。このとき、json データには特別な処理が必要です。つまり、json データの外側の層に 1 対のかっこが追加されます。詳細については、次の printlnJSONObject メソッドを参照してください。 HttpAdapter.java ファイル。

public void json(HttpServletRequest request,HttpServletResponse response){ Mapmap=new HashMap(); String id = request.getParameter("id"); //接收ajax请求带过来的id String level = request.getParameter("level"); //接收ajax请求带过来的level String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 if ("1".equals(level)) { //如果level是'1',则查询第一级目录内容 map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map } else if ("2".equals(level)) { //如果level是'2',则查询第二级目录内容 map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map } else if ("3".equals(level)) { //如果level是'3',则查询第三极目录内容 map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map } map.put("level",level); if (null==callback) { //如果接收的callback值为null,则是不跨域的请求,输出json对象 HttpAdapter.printlnObject(response, map); }else{ //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 HttpAdapter.printlnJSONPObject(response, map, callback); } }

ログイン後にコピー

2.HttpAdapter.java (出力オブジェクトの Java ファイル)、printlnObject メソッドは通常の jsonstringを出力します; printlnJSONObject メソッドは json 文字列に対して特別な処理を実行します。

/** * 打印对象 * @param response * @param object */ public static void printlnObject(HttpServletResponse response,Object object){ PrintWriter writer=getWriter(response); writer.println(JSON.toJSONString(object)); } /** * 打印跨域对象 * @param response * @param object */ public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ PrintWriter writer=getWriter(response); writer.println(callback+"("+JSON.toJSONString(object)+")"); }

ログイン後にコピー

2.フロントエンドajaxクロスドメインリクエストデータ

書き方1:パラメータcallback=をサーバーに送信しますか？、dataType を「jsonp」形式として指定します。クロスドメイン要求中に指定されるデータ形式は、jsonp 形式である必要があります。

function loadData(obj,level,id,value){ $.ajax({ url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?', //将callback写在请求url后面作为参数携带 type:'GET', async:false, dataType:'jsonp', success:function(data){ console.log(data); //其他处理(动态添加数据元素) }); }

ログイン後にコピー

書き方2: URLにコールバックを記述する必要はありませんが、jsonpパラメータに'callback'を指定し、jsonpCallbackパラメータに値を与える必要があります。

function loadData(obj,level,id,value){ $.ajax({ url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, type:'GET', dataType:'jsonp', jsonp: 'callback', //将callback写在jsonp里作为参数连同请求一起发送 jsonpCallback:'jsonpCallback1', success:function(data){ console.log(data); }); }

ログイン後にコピー

上記2つの書き方は同じ意味ですが、書き方が異なります。

次に、jsonp の動作原理を追加しましょう。