jQuery.form.js の詳細な使用例を共有する

問題に直面しました: フォームを送信した後、バックエンドはプロンプト メッセージを返します。しかし、ネイティブHTMLではバックエンドから返されるデータを取得できないため、送信後にページが飛んでしまい、バックエンドから返されるjsonデータが空白のページに表示され、ユーザーエクスペリエンスは0点となります。この記事では主に jQuery.form.js の使用法について説明し、皆様のお役に立てれば幸いです。

解決策: jquery.form.js を使用します

手順

コントロール送信関数をカスタマイズします

var submitChange=function () {
    $("form").ajaxSubmit(function (message) {
      alert(message.text);
      window.location.href="/index" rel="external nofollow" ;
    });
    return false;
  }
  //这个函数一是处理了后端返回的数据，二是返回了一个false，阻断了原生submit事件的发生。

フォームを変換します (onsubmit イベントを追加し、カスタム処理関数を返します)

<form action="/do" onsubmit="return submitChange();">
</form>

最後に

JS ファイルをインポートするように注意してください！

例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>

関連する推奨事項:

jquery DataTable フロントおよびバックエンドの動的ページング実装メソッドの共有

jquery 単一ファイルの読み込み vue コンポーネントのメソッド共有

jquery テキストの内容をクリックすると拡大して中央に表示されます共有例

以上がjQuery.form.js の詳細な使用例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。