ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery での Ajax 構文例のまとめ

Jquery での Ajax 構文例のまとめ

伊谢尔伦
リリース: 2017-06-16 10:32:02
オリジナル
1724 人が閲覧しました

A v Java ソフトウェアの開発では、バックグラウンドで、SSH などのさまざまなフレームワークを通じてコードをカプセル化して、Struts、SpringMVC からフロント デスクへ、フロント デスクからフロント デスクへの Java コードの作成を容易にすることができます。アクションプロセスはカプセル化されて制御されるため、これを実現するにはいくつかの簡単な設定を実行するだけで済みます。Spring はさまざまなオブジェクトの管理をカプセル化して AOP プログラミングを提供するため、Hibernate と IBatis による JDBC コードのカプセル化は必要ありません。毎回、反復的で複雑な JDBC コードを作成します。フロント デスクでは、一部の効果や検証などは JavaScript 言語を通じて行われますが、これは Java コードに似ており、フロントエンド コードの記述を容易にするために js コードをカプセル化します。ブラウザの互換性の問題を解決する上で非常に大きな利点があり、それが私たちがこれを使用する理由の 1 つです。

Ajax (

非同期 Javascript + XML) 非同期リフレッシュは、かつては、JDBC コードのようないくつかの必要な手順を実行する必要がありました。 手順: AJAX - コア XMLHttpRequest オブジェクト。 、JQuery は Ajax 非同期操作もカプセル化します。一般的なメソッドをいくつか示します。 $.post、 $.ajax、 $.get、$.getJSON。

1. $.post、この関数は実際には $.ajax をさらにカプセル化し、パラメータを減らして操作を簡素化していますが、適用範囲は小さくなります。 $.post はデータ送信方法を簡素化し、POST 経由でのみ送信できます。サーバーには同期ではなく非同期でのみアクセスでき、エラー処理は実行できません。このような状況では、この関数を使用してプログラミングを容易にすることができます。メソッド、非同期などの主要なパラメータはデフォルトで設定されており、変更することはできません。例は再度紹介しません。

url: リクエストアドレスを送信します。

data: 送信されるキー/値パラメータ。

Jquery での Ajax 構文例のまとめcallback: 送信成功時のコールバック関数。

type: コンテンツ形式、xml、html、script、json、text、_default を返します。

2番目の$.ajaxは、JQueryがajaxをカプセル化するための最も基本的なステップです。この関数を使用することで、非同期通信のすべての機能を完了できます。つまり、どのような状況でも、このメソッドを通じて非同期リフレッシュ操作を実行できます。ただし、パラメーターがたくさんあるので、少し面倒なこともあります。一般的に使用されるパラメータを見てみましょう。道路強度を送信

// 非同期更新をサポートするかどうか、デフォルトは true です

data //送信する必要があるデータ

dataType //サーバーから返されるデータのタイプ (xml、String、Json など)

success //リクエスト成功後のコールバック Function

Error //リクエスト失敗後のコールバック関数

}

$.ajax(configObj);//$.ajax 関数を通じて呼び出されます。

それでは、実際的な例を見てみましょう。非同期削除の例を見てみましょう。 "> タイプ:

"POST"

, //送信方法

URL: $ "$ {PageContext.Request.ContextPath} /org/dodelete.action"

  • ,

    // パス データ: {

  • "
  • :

    "${org.id}" ️成功: 関数(結果) {

    //返されたデータは結果に従って処理されます
  • $("#tipMsg").text(

    "データの削除に成功しました "
  • );
  • 「# tipMsg").text("データの削除に失敗しました");

  • $.post と同様に、この関数は get メソッドの送信データをカプセル化し、get 送信データの非同期更新を解決するためにのみ使用できます。使用方法は上記と同様です。ここではこれ以上のデモンストレーションはありません。

  • 4. $.getJSON、これはさらなるカプセル化です。つまり、Json の戻りデータ型で動作します。設定する必要があるパラメータは 3 つだけで、非常に単純です: url、[data]、[callback]。

    実際、$.ajax メソッドを理解すれば、他のものはすべて同じように使用できます。
  • しかし、ここにはさらに厄介な別の問題があります。つまり、ページ上のデータ量が比較的大きい場合はどうすればよいでしょうか?通常のフォームの処理では、フレームワーク Struts2 を使用して、ドメイン駆動モードを通じてカプセル化を自動的に取得します。 では、ajax を通じてカプセル化するにはどうすればよいでしょうか。ここで、JQuery には Jquery Form というプラグインがあり、この js ファイルを導入することで、Struts2 のドメイン駆動モードをサポートするフォーム フォームを模倣し、データの自動カプセル化を実行できます。使用法は $.ajax と似ています。実際の例を見てみましょう。ユーザーを保存するフロントエンド コードは次のとおりです。 ">

    function
  • () {
  • //実行する必要のある関数を処理します。前

  • "#insertBtn").attr( "無効"、 );

  • {//成功後に必要なコールバック関数を返す

    if
  • (result.success) {
  • /こちらは、後で紹介する対応するツリーです、

  • var

    tree = window。親.treeフレーム .tree ;

  • else {

  • tipMsg").text("組織の保存に失敗しました");

  • ボタン

  • ).attr(
  • "disabled"

    false); (オプション);

    //Jquery.Form の ajaxForm メソッドを通じて送信します
  • この方法では、データをカプセル化する必要がなくなり、ajax 操作と非同期更新操作が大幅に簡素化されます。要約すると、JQuery での ajax 操作はフォーム処理とよく似ていますが、実装されている機能は異なります。プログラミングの学習とは、実際には、データの処理方法、フロント デスクからデータを取得し、対応する処理のためにサーバーに転送し、適切な表示のために返す方法を学習することです。このプロセスをいくつかのテクノロジを通じて実装することで、開発は完了します。ソフトウェアの感触はまだ非常に興味深いです。


  • 以上がJquery での Ajax 構文例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート