ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery での Ajax 操作の完全なサンプル共有

JQuery での Ajax 操作の完全なサンプル共有

小云云オリジナル: 2018-01-23 13:18:292518ブラウズ

この記事は主に JQuery での Ajax 操作の完全な例を紹介しています。非常に優れており、必要な方は参考にしていただければ幸いです。

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

Ajax (非同期 Javascript + XML) の非同期リフレッシュは、比類のない役割を果たしています。これまで、Ajax 操作を記述するには、常に JDBC コードのようないくつかの必要な手順を実行する必要がありました。

AJAX - コアの XMLHttpRequest オブジェクトであり、JQuery も Ajax をカプセル化します。非同期操作の一般的な方法をいくつか示します。 $.ajax、$.post、$.get、$.getJSON。

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

var configObj = {
  method //数据的提交方式：get和post
  url //数据的提交路劲
  async //是否支持异步刷新，默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型，例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

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

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

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

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

callback: 送信成功時のコールバック関数。

type: コンテンツ形式、xml、html、script、json、text、_default を返します。 E e、$.Get、$ .post と同様に、この関数は GET メソッドの送信データにカプセル化されており、使用方法は GET メソッドと同様です。その上。ここではこれ以上のデモンストレーションはありません。たとえば、$ .Getjson、これはさらにパッケージ化されています。つまり、戻りデータ型を JSON として操作します。設定する必要があるパラメータは 3 つだけで、非常に単純です: url、[data]、[callback]。

実際、$.ajax メソッドを理解すれば、他のものはすべて同じように使用できます。

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

<span style="font-size:18px;">   // 删除 
    $.ajax({ 
     type : "POST", //提交方式 
     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径 
     data : { 
      "org.id" : "${org.id}" 
     },//数据，这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
       $("#tipMsg").text("删除数据成功"); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("删除数据失败"); 
      } 
     } 
    }); 
</span>

この方法では、データをカプセル化する必要がありません。これにより、ajax 操作が大幅に簡素化され、非同期の更新操作になります。要約すると、JQuery での ajax 操作はフォーム処理とよく似ていますが、実装されている機能は異なります。プログラミングを学ぶということは、実際には、データをどのように転送して処理するか、フロントデスクからデータを取得し、対応する処理のためにサーバーに送信し、その後、関連する表示のために返す方法を学ぶことであり、このプロセスをいくつかのテクノロジーを通じて実装することで、ソフトウェアは完成しましたが、それでも非常に興味深いと感じています。

JQuery での Ajax 操作の完全なサンプル共有

関連記事