今回は、$.ajax() メソッドを使用してサーバーから json データを取得する方法を説明します。次に実際のケースを見てみましょう。
1つ。 jsonとは何ですかjson は、xml に代わるデータ構造であり、xml に比べて小さいですが、強力な記述機能を備えており、トラフィックが少なく、ネットワーク上でのデータ送信が高速です。
json は、次の記号でマークされた文字列です。
{キーと値のペア}: json オブジェクト
[{},{},{}]: json 配列
"": 二重引用符は属性または値です
: : コロンの前にはキーがあり、その後に値が続きます (この値は、基本
データ型の値、または配列またはオブジェクトにすることができます)、つまり、{"age": 18} これは、18 歳と [{"age": 18},{"age": を含む json オブジェクトとして理解できます。 20}] は、2 つのオブジェクトを含む json 配列を表します。 {"age":[18,20]} を使用して、年齢配列を持つオブジェクトである上記の json 配列を簡素化することもできます。
2. $.ajax() メソッドの dataType 属性の値 $.ajax() メソッドの dataType 属性は、サーバーによって返されることが予期されるデータ型である String 型パラメーターである必要があります。指定しない場合、JQuery は、http パッケージの MIME 情報に基づいて、responseXML または responseText [パート 3 で説明] を自動的に返し、それをコールバック
関数パラメータとして渡します。利用可能なタイプは次のとおりです: xml: JQuery で処理できる XML ドキュメントを返します。
html: プレーン テキストの HTML 情報を返します。含まれているスクリプト タグは、DOM に挿入されたときに実行されます。
script: プレーンテキストの
JavaScriptコードを返します。結果は自動的にキャッシュされません。キャッシュパラメータが設定されていない限り。 (同じドメインの下ではなく) リモート リクエストを行う場合、すべての post リクエスト が get リクエストに変換されることに注意してください。 json: JSON データを返します。
jsonp: JSONP形式。 myurl?callback=? などの SONP フォームを使用して関数を呼び出すと、JQuery は最後の「?」を正しい関数名に自動的に置き換えて、
コールバック関数三． MIME データ型と応答 setContentType() メソッド MIME タイプとは何ですか? 出力結果をブラウザに送信する場合、ブラウザは出力ドキュメントを処理するために適切なアプリケーションを起動する必要があります。これは、さまざまなタイプの MIME (MultiPurpose Internet Mail Extensions) を通じて実現できます。 HTTP では、MIME タイプは Content-Type ヘッダーで定義されます。
たとえば、Microsoft の Excel ファイルをクライアントに送信します。するとこの時のMIMEタイプは「application/vnd.ms-excel」になります。実際のほとんどの場合、このファイルは次の場所に転送されます。 処理する Execl (特殊な MIME タイプのアプリケーションを処理するように Execl を設定すると仮定します)。 Java では、MIME タイプを設定するには、Response オブジェクトの ContentType プロパティを使用します。たとえば、一般的に使用されるのは、response.setContentType("text/html;charset=UTF-8") です。
初期の HTTP プロトコルでは、追加のデータ タイプ情報はなく、クライアント プログラムはマルチメディア データ タイプをサポートするために、データ データの前に MIME を付加していました。データの種類を識別するための型情報。
各 MIME タイプは 2 つの部分で構成されます。最初の部分はテキスト、画像などのデータの一般的なカテゴリであり、2 番目の部分は特定のタイプを定義します。
一般的な MIME タイプ:
ハイパーテキスト マークアップ言語 text .html,.html text/html
プレーンテキスト .txt text/plain
RTF テキスト .rtf application/rtf
GIF グラフィックス .gif image/gif
JPEG グラフィックス .ipeg,.jpg image/jpeg
auサウンドファイル.au audio/basic
MIDI音楽ファイルmid,.midi audio/midi,audio/x-midi
RealAudio 音楽ファイル .ra、.ram audio/x-pn-realaudio
MPEG ファイル .mpg、.mpeg video/mpeg
AVI ファイル .avi video/x-msvideo
GZIP ファイル .gz application/x-gzip
TAR ファイル .tar application/x-tar
クライアント プログラムがサーバーからデータを受信する場合、サーバーからのデータ ストリームを受け入れるだけでドキュメントの名前は認識されないため、サーバーは追加情報を使用してクライアント プログラムにデータの MIME タイプを伝える必要があります。
サーバーは実際のデータを送信する前に、まずデータをマークする MIME タイプ情報を送信する必要があります。この情報は Content-type キーワードを使用して定義されます。たとえば、HTML ドキュメントの場合、サーバーは最初に次の 2 行を送信します。 MIME 識別情報。この識別情報は実際にはデータ ファイルの一部ではありません。
コンテンツタイプ: text/html
2 行目は空白行であることに注意してください。この空白行を使用する目的は、MIME 情報を実際のデータの内容から分離することです。
前述したように、Java では、Response オブジェクトの ContentType 属性を使用して MIME タイプを設定します。この設定方法は、response.setContentType(MIME) ステートメントを使用することです。クライアントブラウザを作成し、さまざまなタイプのデータを区別し、さまざまなMIMEに従ってブラウザ内のさまざまなプログラム埋め込みモジュールを呼び出して、対応するデータを処理します。
参照用に、Tomcat のインストール ディレクトリである confweb.xml に多数の MIME タイプが定義されています。たとえば、次のように設定できます:
response.setContentType("text/html; charset=utf-8"); response.setContentType("text/plain; charset=utf-8"); application/json jsonデータ
このメソッドは、応答が送信される前に、クライアントに送信される応答のコンテンツ タイプを設定します。指定されたコンテンツ タイプには、text/html;charset=UTF-8 などの文字エンコード仕様を含めることができます。 getWriter() メソッドが呼び出される前にこのメソッドが呼び出された場合、応答の文字エンコーディングは指定されたコンテンツ タイプからのみ設定されます。 getWriter() メソッドの呼び出し後、または送信後にこのメソッドが呼び出された場合、http プロトコルを使用する場合、このメソッドは応答の文字エンコーディングを設定しません。 コンテンツタイプのエンティティヘッダー。
4つ。 $.ajax() メソッドを使用して JSON データを取得する 3 つの方法
dataType パラメータの設定によって、サーバーから返されたデータを jquery がどのように自動的に解析できるかが決まります。バックグラウンドから返された json 文字列を取得して json オブジェクトに解析するには、いくつかの方法があります。以下に、Java の例を示します。以下の3つの方法の結果
1. dataType が $.ajax() パラメーターに設定されておらず、戻り値の型がバックグラウンド応答に設定されていない場合、デフォルトで通常のテキストとして処理されます [response.setContentType("text/html;charset= utf-8"); もテキストとして処理されます ], js では、eval() や $.parseJSON() などのメソッドを手動で使用して、返された文字列を json オブジェクトに変換して使用する必要があります。
リーリー2. $.ajax() パラメータで dataType="json" を設定すると、jquery は返された文字列を json オブジェクトに自動的に変換します。背景は次のように設定できます: [推奨] response.setContentType("text/html;charset=utf-8"); または response.setContentType("application/json;charset=utf-8");
//Java代码：后台获取单个数控定位器的历史表格的数据
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
System.out.println(JSONArray.fromObject(singleHistoryData).toString());//打印：[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
} /*js代码：选择查询某一时间段的数据，点击查询之后进行显示*/
$("#search").click(function () {
var data1 = [];
var n;
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": startDate,
"endDate": endDate
},
success: function (data) {
alert(data);//---->弹出[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]，后台传过来几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
alert(Object.prototype.toString.call(data)); //--->弹出[object String]，说明获取的是String类型的数据
var JsonObjs = eval("(" + data + ")"); //或者：var JsonObjs = $.parseJSON(data);
alert(JsonObjs);//alert(JsonObjs);---->弹出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后台传过来几条singleHistoryData对象就打印几个[object Object]
n=JsonObjs.length;
if(n==0){
alert("您选择的时间段无数据，请重新查询");
}
for(var i = 0; i < JsonObjs.length; i++){
var name = JsonObjs[i]['time'];//针对每一条数据：JsonObjs[i]，或者：JsonObjs[i].time
var state = JsonObjs[i]['state'];
var ball = JsonObjs[i]['ball'];
var xd = JsonObjs[i]['xd'];
var yd = JsonObjs[i]['yd'];
var zd = JsonObjs[i]['zd'];
var xf = JsonObjs[i]['xf'];
var yf = JsonObjs[i]['yf'];
var zf = JsonObjs[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};//个数与下面表头对应起来就可以了，至于叫什么名字并不影响控件的使用
}
if(JsonObjs.length != 10){
for(var j=0;j<(10-((JsonObjs.length)%10));j++){ //补全最后一页的空白行，使表格的长度保持不变
data1[j+JsonObjs.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", //必须 表格id
"head":["时间","运行状态","球头状态","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承载力/Kg","Y向承载力/Kg","Z向承载力/Kg"], //必须 thead表头
"body":data1, //必须 tbody 后台返回的数据展示
"foot":true, // true/false 是否显示tfoot --- 默认false
"displayNum": 10, //必须 默认 10 每页显示行数
"groupDataNum":6, //可选 默认 10 组数
sort:false, // 点击表头是否排序 true/false --- 默认false
search:false, // 默认为false 没有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
});3. ajaxメソッドのパラメータにDataTypeが指定されておらず、戻り値の型がバックグラウンドで「application/json」に設定されています。このように、jquery は MIME タイプに基づいてインテリジェントに判断し、それを自動的に解析して json オブジェクトに変換します。
リーリー注: フロントエンドまたはバックエンドで json オブジェクトを返す設定がある限り、eval() メソッドまたは $.parseJSON() メソッドを使用して解析する必要はありません。そうしないと、再度解析するときにエラーが発生します。
要約: 上記の方法のうち、便利でエラーが発生しにくい 2 番目の方法を使用することをお勧めします。
5つ。 eval() メソッド
var json object=eval('('+json data+')'); 中括弧で囲まれた内容が eval() によって返され、JSON オブジェクトが返されます。 eval 関数の仕組み: eval 関数は、JavaScript コードを含む指定された文字列を評価し、その文字列に含まれる式または一連の正当な JavaScript ステートメントの実行を試みます。 eval 関数は、最後の式またはステートメントに含まれる値または参照を返します。
なぜ eval に "("("+data+")");// を追加する必要があるのでしょうか?
理由は: 評価自体です。
jsonは「{}」で始まり最後が「{}」で終わるため、JSではステートメントブロックとして処理されるため、強制的に式に変換する必要があります。かっこを追加する目的は、JavaScript コードを処理するときに、ステートメントとして実行するのではなく、かっこ内の式を eval 関数に強制的にオブジェクトに変換させることです。たとえば、オブジェクト リテラル {} を考えます。外側の大括弧が追加されていない場合、eval はその中括弧を JavaScript コード ブロックの開始マークと終了マークとして認識し、{} は空のステートメントを実行するとみなします。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上が$.ajax() メソッドはどのようにしてサーバーから json データを取得しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
