jquery+ajax によるデータ更新の実装方法

今回は、jquery+ajaxでデータ更新を実装する方法と、jquery+ajaxでデータ更新を実装するための注意点を紹介します。以下は実際的なケースです。見てみましょう。

アプリケーションのバックグラウンド

springbootアーキテクチャを使用する 以下に示すインターフェイス レイアウトでは、データを保存または更新するには、バックグラウンドにデータを送信する必要があります。成功または失敗を促すにはどうすればよいですか?従来の springmvc モードを使用する場合は、ページをフロントエンドに渡す必要があります。このページでは、操作が成功したかどうかを確認するだけです。プロンプトの後、Web サイトを閲覧するときに表示されるプロンプトと同様に、データを更新する必要があります操作は成功し、5 秒後に戻ります。

比較的愚かで、顧客体験も比較的悪いです。

変換プロセス

ajaxを使用すると上記の問題を解決できますか?

答えは「はい」です。[保存] をクリックすると、ResponseBody タグを使用してバックグラウンドで Ajax リクエストが実行され、戻り値がデータのみに制限されます。次に、返されたデータに基づいて、対応するプロンプト情報を提供するだけです。

従来の Ajax リクエスト データでは、フォーム内のデータを再編成し、それをすべてリクエスト本文に入れる必要があります。次のコードに示すように:

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

送信するフォーム データが比較的大きい場合、データも比較的大きくなります。コードは比較的肥大化しています。同時に、形という形も存在意味を失いました。

フォームのajax送信を実装するよりエレガントな方法はありますか?確かに。

jquery の ajaxform プラグインは比較的良い選択です。

実装プロセス

最初のステップ。もちろん、強力なプラグインも紹介します。

<script src="static/assets/js/jquery.form.min.js"></script>

js をダウンロードするには、github アドレスを提供します: https://github.com/jquery-form/form。

ステップ 2。リクエストを送信したい場所に ajax+form リクエストを送信します。

function insert() {
    var options = {
     // target:  '#output1', // 用服务器返回的数据 更新 id为output1的内容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些属性:
     //url:  url   // 默认是form的action，如果写的话，会覆盖from的action.
     //type:  type  // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服务端返回的类型.)
     //clearForm: true  // 成功提交后，清除所有的表单元素的值.
     resetForm: false  // 成功提交后，重置所有的表单元素的值.
     //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
     //当请求大于3秒后，跳出请求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表单 .
    $('#baseForm').ajaxSubmit(options);
   }

送信後に返されるメソッドを処理する

// 提交后
   function showResponse(responseText, statusText) {
    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
    
   }

バックエンド実装コード

@RequestMapping("/basicSave")
 @ResponseBody
 public String BasicSave(PointInfo pi){
  if(!pi.getSaddress().equals("")){
   pi.setType("1");
  }else{
   pi.setType("0");
  }
  int newId = pointInfoService.saveorupdate(pi);
  return newId+"";
 }

ロジックを自分で定義する

注意

• 送信するときは必ずajaxSubmitメソッドを使用してください

• ミットアクション、 request メソッド (post または get)、dataType (json、xml) などはすべてデフォルトでフォーム内のデータを使用し、パラメーターが変更されると上書きされます。

追跡調査

プロンプトボックスについて

アラートを使用しますか?ここでアラートを作成すると、おいしい食べ物の皿に唾を吐きかけるようなものです。これより美しいプロンプト ボックスはありますか?もちろん、答えはイエスです！ 通知プラグインを使用してプロンプトボックスを美しくします

まずレンダリング:

実装手順1. 通知に必要な js と css をインポートします

<script src="static/assets/plugins/notifyjs/dist/notify.min.js"></script>
 <script src="static/assets/plugins/notifications/notify-metro.js"></script>
 <script src="static/assets/plugins/notifications/notifications.js"></script>
 <link href="static/assets/plugins/notifications/notification.css" rel="external nofollow" rel="stylesheet">

2. インターフェースを呼び出します

$.Notification.notify('success','top center', '温馨提示', '保存成功！');

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery で ajax をリクエストし、サーブレットで ajax をレスポンスする

jquery を使用して入力ボックスのテキストコンテンツを操作する

入力ボックスとドロップ間のリンク効果を実現するダウンボックス

以上がjquery+ajax によるデータ更新の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。