ホームページ > 記事 > ウェブフロントエンド > JQueryでのAjax操作事例を詳しく解説

JQueryでのAjax操作事例を詳しく解説

php中世界最好的语言オリジナル: 2018-04-24 14:59:541193ブラウズ

今回は、JQuery での Ajax 操作のケースについて詳しく説明します。JQuery で Ajax 操作を使用する際の注意事項について、実際のケースを見てみましょう。

Java ソフトウェア開発では、SSH などのさまざまなフレームワークを介してバックグラウンドでコードをカプセル化し、Java コードの作成を容易にすることができます。たとえば、Struts と SpringMVC は、フロントデスクからプロセスをカプセル化して制御します。アクションを実行するため、いくつかの簡単な設定を行うだけで済みます。Spring はさまざまなオブジェクトの管理をカプセル化し、AOP プログラミングを提供するため、非常に容易になります。一方、Hibernate と IBatis は JDBC コードをカプセル化し、繰り返して複雑なコードを記述する必要はありません。毎回JDBCコード。 ️ページへの一部の効果、検証などはすべて

JavaScript

言語を通じて行われますが、これは Java コードと同様であり、最も基本的なフロントエンド言語であり、jQuery です。 js の最も基本的な言語ですコードのカプセル化により、フロントエンドコードの作成が容易になります。また、ブラウザの互換性の問題を解決する上で非常に大きな利点があります。これが、コードのカプセル化を使用することが非常に重要である理由の 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 関数を通じて呼び出されます。 dotion 2016年から2007年から2016年までの10のうち10件。 $.post はデータ送信方法を簡素化し、POST 経由でのみ送信できます。サーバーには同期ではなく非同期でのみアクセスでき、

エラー処理

はできません。このような状況では、この関数を使用してプログラミングを容易にすることができます。メソッド、非同期などの主要なパラメータはデフォルトで設定されており、変更することはできません。例は再度紹介しません。

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

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

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

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

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

4. $.getJSON、これはさらなるカプセル化です。つまり、返された

データ型

を Json として操作します。設定する必要があるパラメータは 3 つだけで、非常に単純です: url、[data]、[callback]。 A 実際には、$ .ajax メソッド、その他のメソッドが使用され、すべて同じですが、非常に簡単です。

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

Form

を模倣して Struts2 のドメイン駆動モードをサポートし、自動データカプセル化を実行できます。使用法は $.ajax と似ています。ユーザーを節約するフロントエンドコードを見てみましょう。

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {//处理以前需要做的功能 
    $("tipMsg").text("数据正在保存，请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {//返回成功以后需要的回调函数 
    if ( result.success ) { 
     $("#tipMsg").text("机构保存成功"); 
          //这里是对应的一棵树，后边会介绍到， 
     // 控制树形组件，增加新的节点 
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text("机构保存失败"); 
    } 
    // 启用保存按钮 
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JQueryでのAjax操作事例を詳しく解説

関連記事