私はプロジェクトを展開してプレイしました。今日、私はショッピングカート内の製品の量を変更して、対応する総価格を部分的に更新する機能を改善しました。誰もがこれをAjaxで実装する必要があることを知っています。私は以前にAjaxを学んだことがありませんでした、そして、私はたまたまこの小さな機能を使用してAjaxの知識を学ぶだけでした。
1。問題の分析
ページの状況を見てみましょう。
関数は上記のとおりです。 Ajaxが利用できない前に、通常、ユーザーの変更された値に基づいてアクションを探し、新しいJSPページに戻り、ページ全体をリロードして数字の更新を完了します。しかし、AJAXテクノロジーを使用すると、Ajaxテクノロジーを使用して、ページ全体をリロードする代わりに、変更したい場所への変更を部分的に更新できます。まず、上記の写真に対応するJSPパーツのコードを見てみましょう。
<div> <！ - ショッピングカート - > <div id = "Shopping_cart"> <div>私のショッピングカート</div> <Table CellPadding = "0" cellpacing = "0"> <tr> <th> <th colspan = "2" 2 "2" 2 " </tr> <c：foreach items = "$ {sessionscope.forder.sorders}" var = "sorder" varstatus = "num"> <tr lang = "$ {sorder.product.id}"> <td> <a href = "＃"> $ {num.count} </a> </td> <imgg src = "$ {shop}/files/$ {sorder.product.pic}"/> </td> <td> <a href = "＃"> $ {sorder.name} </a> </td> <td> $ {sorder.price} </td> <td> <in putic bock--> value = "$ {sorder.number}" lang = "$ {sorder.number}"> </td> <td> $ {sorder.price*sorder.sorder.number} </td> <td> < id = "totals-table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = "" "> <strong id =" total "> $ {sessionscope.forder.total} </stron colspan = "1"> freight </td> <td style = ""> ￥ <span id = "yunfei"> 0.00 </span> </td> </tr> <td colspan = "1"> <strong>合計</strong> </td> <td style = "" "" " id = "TotalAll"> <strong> $ {sessionscope.forder.total} </strong> </span> </td> </tobody> </table> <div> <font> <a href = "$ {shop}/user/confirm.jsp"> <button "確認</button> </a> </font> <font> <a href = "＃"> <button type = "button"> <font> clear </font> </font> </font> </font> <a href = "$ {shop}/index.jsp"> <ボタンタイプ= "> <font> style = "clear：blote"> </div> </div> </div> </div> </div> </div> </div> </div>多くのように見えますが、機能は実際には非常に単純です。ドメインから対応するデータを表示して表示します。上記の機能を実装したい場合は、最初にアイデアを分析しましょう。
まず、イベントを登録する必要があります。つまり、番号のテキストボックスによってトリガーされたイベントが変更されます。
この場合、ユーザーから数値入力を取得し、ユーザーがランダムに入力できないようにする必要があるため、入力の合法性を判断します。
合法の場合は、AJAXリクエストを介してバックグラウンドにデータを送信します。
バックグラウンドは、対応するビジネスロジック法を呼び出して、新しい数の新しい結果を取得し、ストリームを介して前景に返します。
Ajaxが結果を受信した後、対応する場所でデータを更新します。プロセス全体が終了しました。
違法である場合、変更前の数が表示されます。治療は行われていません
2。AJAXリクエストの実装
プロセスを分析した後、実装を開始します。まず、ここでJS部分のコードを貼り付け、次に上記のプロセスに基づいて詳細に分析します。
<script type = "text/javascript"> $（function（）{// 1。登録イベント$（ "。テキスト"）番号> 0）{//合法である場合、同期は$（this）.attr（ "lang"、number）;製品、および変更された数量の後に合計価格を返します$ .post（ "sorder_updatesorder.action"、{number：number、 'product.id'：pid}、function（total）{$（ "＃total"）。html（total）; //すべての製品のsubtotal var yunfei = $（ "＃yunfei"）。 $（ "＃totalall"）。html（（合計*1 + yunfei*1）.tofixed（2））; //単一の製品のサブテルを計算し、2つの小数点を保持しますvar rise =（$（this）.parent（）。prev（）。html（）*number）.tofixed（2）; $（this）.parent（）。next（）。html（rice）; } else {//違法である場合、これを合法的な数値に復元します。 }}）}）}）</script>2.1登録イベント
登録イベントは、最初にこのテキストボックスに配置する必要があることがわかります。ここでは、クラスセレクターを介して配置されます。テキストボックスであるため、変更（）を使用してイベントを登録し、イベントを処理するために関数（）関数を定義します。
2.2データの合法性を決定します
OK、イベントを登録した後、ユーザーが0または負の数を入力するか、10小数または文字やその他の文字などを入力する場合があるため、ユーザーが入力した数の合法性について判断する必要があります。検証が必要です。 Isnan（number）とは、数字が数字でない場合、それが真であることを意味します。この関数を使用して、それが数であるかどうかを判断できます。 parseint（number）とは、アレイを丸めて、それをそれ自体と比較することを意味します。これを巧みに使用して、数値が整数であるかどうかを判断します。
2.3 AJAXリクエストを送信します
データが合法の場合、データを取得した後、Ajaxリクエストを背景に送信できます。質問を検討する必要があります。どのパラメーターを渡す必要がありますか？まず、ユーザーが数量を更新したい場合、ユーザーが入力した数値を送信する必要があることは間違いありません。第二に、どの製品を送信する必要がありますか？つまり、ユーザーが変更したい製品のID番号を取得する必要があります。送信されるパラメーターを知った後、ID番号を取得する方法を見つけることができます。
ここに質問があります。ユーザーはショッピングカートに複数の製品を持っている場合があります。当然のことながら、彼らは、声明で異なる製品のIDを取得できるなら、それは素晴らしいことだと思うでしょう。したがって、彼らはテキストボックスの親タグを使用することを考えました。異なる製品の親タグは同じであるため、それらは最初の<tr>タグであるため、製品のIDを<tr>タグにラング属性に入れます。なぜラング属性に置くのですか？ Lang属性は基本的に使用されていないため、言語を定義するために使用され、Lang属性を使用することは他の属性と競合するのは容易ではありません〜このように、$（this）.Parents（ "Tr：First"）。
次に、ajaxリクエストの送信を開始し、postメソッドを使用して送信します。 POSTメソッドには4つのパラメーターがあります。
最初のパラメーターは、に送信されるアクションです
2番目のパラメーターは、json形式を使用して渡されるパラメーターです
3番目のパラメーターは関数（結果）です。これは、バックグラウンドを通過するデータを受信するために使用されます。
4番目の方法は、受信するデータの種類を指定することです。 JSONとはJSONデータを受信することを意味し、テキストはストリームを受信することを意味します
バックグラウンドから返される合計はすべての製品の合計価格であるため、関数では、最初にIDに基づいてすべての製品サブタルの要素を取得し、値を合計に割り当てます。合計は、貨物が追加された合計価格です。後者のトフィックス（2）は、2つの小数点が保持されることを意味します。次に、単一の製品のサブテルの要素を取得し、単一の製品のサブテルを計算します。このようにして、フロントデスクのページは、リロードせずに更新する部品を更新します。これがAjaxが強力なものです。これは、以前のEasyUIと同じです。これはAJAXリクエストでもあります。
さて、Ajax部分はここに紹介されています。以下は、今すぐリクエストのバックグラウンド処理です。これは私自身のプロジェクトのためであり、プロジェクトの進捗を記録するために使用されます。
3。バックエンドアップデート
Ajaxが現在リクエストしたアクションは、sortedActionのupdateSorder（）メソッドです。したがって、lupdatesOrder（）メソッドを完成させるためにcardractionにアクセスしてください。
@Controller@Scope（ "Prototype"）Public Class Sodraction Extends BaseAction <Sorder> {public String addSorder（）{//無関係なコード... //製品番号Public String updateSordord（）{forder forder）session.get（ "forder"）; //ショッピングアイテムを更新すると、Product.idが渡されたものがモデルにカプセル化されていますforder = sorderservice.updatesorder（モデル、フォーダー）; //新しい総価格forder.settotal（forderservice.clutotal（forder））を計算します。 session.put（ "forder"、forder）; // stream inputstream = new bytearrayinputStream（forder.getTotal（）。toString（）。getBytes（））の形式で新しい合計価格を返します。 「ストリーム」を返します。 }}サービス内の対応する方法は次のように改善されます。
// sorderserviceインターフェイスパブリックインターフェイスsordererservice拡張baseService <sorder> {//無関係なコードを保存... //製品IDおよび数量に応じて製品数量を更新するパブリックフォーダーアップデートオーダー（ソーダーソーダー、フォーダーフォーダー）;} // sorderService {//無関係なコードを省略... @Override public forder updatesOrder（SORDER SOORDE、FORDER FORDER）{for（sorder temp：forder.getSorders（））{if（temp.getProduct（）。getId（）。equals（）。 }} forderを返します。 }}最後に、struts.xmlファイルの構成は、次のように<blobal-result>に「ストリーム」を割り当てることです
<Global-Results> <！ - 他のパブリック構成を保存 - > <結果名= "stream" type = "stream"> <param name = "inputname"> inputstream </param> </result> </global-results>
さて、アクションで計算された合計価格は、ストリームの形を介してフロントデスクに送信できます。Ajaxは、その機能で受け取って、合計で配置され、前面に接続できます。
オリジナルリンク：http：//blog.csdn.net/eson_15/article/details/51487323
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。