JQueryを使ってアカウント情報変更機能を実装する方法-フロントエンドQ&A-php.cn

JQueryを使ってアカウント情報変更機能を実装する方法

PHPz

リリース： 2023-04-06 11:09:34

オリジナル

590 人が閲覧しました

JQuery は、Web 開発で広く使用されている、高速かつ小型で機能が豊富な JavaScript ライブラリです。現代のインターネット時代において、アカウント情報を変更する機能は、すべての Web サイトで考慮する必要がある重要な機能です。 JQueryを使うと簡単にアカウント情報を変更することができますので、この記事ではJQueryを使ってアカウント情報を変更する方法を簡単に紹介します。

前提条件

アカウント情報変更関数を作成する前に、JQuery についてある程度理解する必要があります。 JQuery をまだマスターしていない場合は、まず関連するチュートリアルとドキュメントを読んで学習してください。

HTML 構造

アカウント情報変更機能では、通常、名前、性別、年齢、連絡先情報などの情報が含まれるフォームページの設計が必要です。サンプルページの HTML 構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>账号信息修改</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="form" action="" method="post">
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" required><br>

        <label for="gender">性别：</label>
        <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br>

        <label for="age">年龄：</label>
        <input type="number" name="age" id="age" required><br>

        <label for="phone">联系方式：</label>
        <input type="tel" name="phone" id="phone" required><br>

        <input type="submit" value="修改">
    </form>
</body>
</html>

ログイン後にコピー

JQuery の実装

上記のページでは、JQuery を使用してアカウント情報を変更しています。具体的な実装方法は次のとおりです。

まず、JQuery の val() メソッドを使用して、フォーム内の情報を取得する必要があります。

var name = $("#name").val();
var gender = $('input[name="gender"]:checked').val();
var age = $("#age").val();
var phone = $("#phone").val();

ログイン後にコピー

同時に、アカウント情報を変更するためのバックエンドインターフェイスを指定する url 変数も定義する必要があります。サンプルコードは次のとおりです:

var url = "https://example.com/api/account/edit";

ログイン後にコピー

次に、変更のためにアカウント情報をバックエンドに送信する AJAX リクエストを定義する必要があります。リクエストを送信する前に、preventDefault() メソッドを使用して、フォームのデフォルトの送信動作を防止する必要があります。

$("#form").submit(function(event) {
    event.preventDefault();

    var name = $("#name").val();
    var gender = $('input[name="gender"]:checked').val();
    var age = $("#age").val();
    var phone = $("#phone").val();

    var url = "https://example.com/api/account/edit";

    $.ajax({
        url: url,
        type: "POST",
        data: {
            name: name,
            gender: gender,
            age: age,
            phone: phone
        },
        success: function(result) {
            console.log(result);
            alert("修改成功！");
        },
        error: function(xhr, status, error) {
            console.log(xhr);
            alert("修改失败！");
        }
    });
});

ログイン後にコピー

このうち、$.ajax()関数の url パラメータは要求されたアドレスを表し、type パラメータは要求されたアドレスを表します。リクエストのタイプ、dataパラメータは、バックエンドインターフェイスに渡されるデータを表します。 success および error パラメーターは、AJAX リクエストが成功したときと失敗したときのコールバック関数を表します。

ここまでで、アカウント情報変更機能のフロントエンド部分は完了しましたが、バックエンドインターフェイスの具体的な実装については、この記事の範囲外です。