NutzフレームワークでjQuery-JSONPプラグインのクロスドメイン・コール関数をテストする(Uncaught SyntaxError:予期しないトークン:エラーの説明)

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

注:この記事は転載を歓迎します。以下は私のテストです。http://blog.csdn.net/wqmain/article/details/8905287

プラグインの導入:私たちすべてが知っているように、ajaxを使用してクロスドメインのアクセスフリーアクセスの問題を直接要求します。今回は、jsonpプロトコル(非公式プロトコル)処理を使用する必要があります.jQueryの$ .ajaxメソッドは、アクセス。 最初にjQueryの$ .ajaxメソッドを使用してクロスドメインアクセスを導入し、サンプル機能を実装するために他のjQueryプラグイン(jQuery-JSONP)の使用方法を紹介しましょう。

1.新しいJSPページを作成し、次のようにjsコードを追加します。

<script type="text/javascript">  
function ajaxtest() {  
$.ajax({  
url:'http://192.168.10.111/demo/testjson',  
data:{rel:13},  
dataType:"jsonp",  
jsonp:"callback",  
jsonpCallback:"success_jsonp",  
timeout:3000,  
dataFilter:function(json){  
console.log("jsonp.filter:"+json);  
return json;  
},  
success:function(json,textStatus){  
console.log("jsonp.success:"+json.name);  
},  
error:function(XMLHttpRequest,textStatus,errorThrown){  
console.log("jsonp.error:"+textStatus);  
}  
});  
}  
</script> 

次のように、jsメソッドをテストする別のボタンを追加します。

<input type="button" value="ajaxtest" onclick="ajaxtest()"/>--> 説明:ajaxtestボタンをクリックするとリクエストが開始され、url、dataType、jsonpなどのパラメータを使用できます.Ajaxはjsonpプロトコルを使用してURL http://192.168.10.111/demo/testjsonへのリクエストを開始し、urlの後に自動的に戻ります。コールバックパラメータを追加すると、実際のリクエストURLアドレスはhttp://192.168.10.111/demo/testjson?rel=13&callback=success_jsonpになります。要求のタイムアウトは3秒で、受信したデータはjson形式の文字列です。 リモートメソッドから返されたjsonデータが正常に受信され、フォーマットが正しい場合は、最初にdataFilterメソッドを入力します(このメソッドで返されたjsonデータをフィルタリング、jsonデータの変更などの前処理ができます)。要求が失敗した場合、または返されたjsonデータが正しい形式でない場合、エラーメソッドに直接移動します。 

だから、どのような種類のデータをサーバーのtestjsonメソッドが返す必要がありますか? jsonオブジェクトまたはjson文字列を直接返すのは正しいことではありません。 また、リクエストで渡されるコールバックパラメータの値を追加する必要があります。バックグラウンド(サーブレットの場合)は次のように扱う必要があります:

public void testjson(HttpServletRequest request, HttpServletResponse response) {
String callback = (String)request.getParameter("callback");
String jsonData = "{"id":"3", "name":"zhangsan", "telephone":"13612345678"}";//为了演示效果,json数据是写死的
String retStr = callback + "(" + jsonData + ")";
response.getWriter().print(retStr);
}

success_jsonp({"id": "3"、 "name": "zhangsan"、 "telephone": "13612345678"})ここで、success_jsonpはajaxパラメータ値の設定に依存します。設定することで、jQueryは自動的にコールバックのパラメータ値として名前を生成します。 要するに、バックグラウンドはパラメータの受信を要求する必要があり、動的ステッチングコールバック変数の値は可能です。

返されたデータ形式が上記のとおりでない場合、要求は失敗し、直接ajaxエラーメソッドに進みます。 Uncaught SyntaxError:予期しないトークン:このエラーは、返されたjsonデータが "("および ")"カッコで囲まれていないか、コールバック値なしで発生しています。

Queryの$ .ajaxメソッドに加えて、Web上で利用可能なその他のjQueryプラグインがたくさんあります。クロスドメイン・コール用のjQueryのjsonpプラグインを見てみましょう。

先に作成したjspページにjQuery-JSONPプラグインを導入し、jsonptestテストメソッドを追加して、アドレスをダウンロードしてください : https : //github.com/jaubourg/jquery-jsonp

<script type="text/javascript" src="jquery.jsonp.js"></script>
<script type="text/javascript">
function jsonptest(){
$.jsonp({
url:'http://192.168.10.111/demo/testjson',
data:{rel:13},
callbackParameter:"callback",
timeout:3000,
dataFilter:function(json){
console.log("jsonp.filter:"+json.name);
json.name = "测试123435";
return json;
},
success:function(json,textStatus,xOptions){
console.log("jsonp.success:"+json.name);
},
error:function(xOptions,textStatus){
console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel);
}
});
}

次のように、jsメソッドをテストする別のボタンを追加します。

<input type="button" value="jsonptest" onclick="jsonptest()"/>

注意:jsonptestボタンをクリックした後、コンソールで表示されるエフェクトは基本的に$ ajaxメソッドと同じですが、違いはdataFilterメソッドです:どちらもdataFilterメソッドを提供しますが、$ .jsonp dataFilterのデータは直接jsonオブジェクトがあり、$ .ajax dataFilterはネイティブjson文字列をコールバックメソッド名で取得します(コンソールは未定義です)。 返されたデータを前処理する必要がある場合は、jQuery-JSONPプラグインの$ .jsonpメソッドを使用することをお勧めします。

testjsonメソッドをサーブレットに導入しました。もしあなたがnutzフレームワーク( http://www.nutzam.com/ )に精通しているなら、nutzフレームワークを使ってtestjsonメソッドを投稿してください :

@At("/testjson")
@Ok("raw")
public String testjson(HttpServletRequest req, String callback, String rel) throws Exception {
Map<String, String> jsonMap = new LinkedHashMap<String, String>();
jsonMap.put("id", "3");
jsonMap.put("name", "zhangsan");
jsonMap.put("telephone", "13612345678");
jsonMap.put("rel", rel);
String jsonp = callback + "(" + Json.toJson(jsonMap) + ")";
return jsonp;
}--> 注意:MainModule(@Ok( "json"))でグローバル戻り値の型をjsonに設定した場合、@jk( "raw")注釈をtestjsonメソッドに追加する必要があります。 Nutz公式文書。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ