具体的にはどうやってajaxを使うのでしょうか？ ajaxを使った具体的な操作の紹介-jsチュートリアル-php.cn

具体的にはどうやってajaxを使うのでしょうか？ ajaxを使った具体的な操作の紹介

寻∝梦

リリース： 2018-09-10 11:34:59

オリジナル

1170 人が閲覧しました

この記事では、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 = {

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

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

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

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

error //リクエストが失敗した後のコールバック関数

}

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

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

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

callback: 送信成功時のコールバック関数。
type: コンテンツ形式、xml、html、script、json、text、_default を返します。 $ .get、$ .POSTのように、この関数はGETメソッドの提出されたデータをカプセル化し、GET送信データの非同期リフレッシュを解決するためにのみ使用できます。。ここではこれ以上のデモンストレーションはありません。
$ .getJson、これはさらにカプセル化されています。つまり、JSONの返品データ型で動作します。設定する必要があるパラメータは 3 つだけで、非常に単純です: url、[data]、[callback]。
(さらに詳しく知りたい場合は、PHP 中国語 Web サイトの AJAX 開発マニュアル列にアクセスして学習してください)

実際、$.ajax メソッドを理解すれば、他のすべてを使用できます。それは同じであり、実際には非常に簡単です。

しかし、ここにはさらに厄介な別の問題があります。つまり、ページ上のデータ量が比較的大きい場合はどうすればよいでしょうか?通常のフォームの処理では、フレームワーク Struts2 を使用して、ドメイン駆動モードを通じてカプセル化を自動的に取得します。では、ajax を通じてカプセル化するにはどうすればよいでしょうか。ここで、JQuery には Jquery Form というプラグインがあり、この js ファイルを導入することで、フォームフォームを模倣して 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  
    };  
  
     $(&#39;#orgForm&#39;).ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
   });  
</span>

ログイン後にコピー

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

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

以上が具体的にはどうやってajaxを使うのでしょうか？ ajaxを使った具体的な操作の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。