JavaScriptを使用してフォームを送信する方法を説明します

Web テクノロジーの継続的な進歩に伴い、動的な Web Web サイトの開発はますます注目を集めており、JavaScript はクライアント側のスクリプト言語として、Web アプリケーションに優れた対話機能と応答機能を提供します。その中でも、フォームの送信は JavaScript の最も基本的な機能の 1 つです。

この記事では、JavaScript を使用してフォームを送信する方法を主に次の側面から説明します:

1. フォームの基本構造と属性

2 . JavaScriptの使用 フォームデータの取得

3. フォームデータの変更とフォーム送信

4. フォームデータの前処理と検証

1. フォームの基本構造と属性

まず、フォームの基本構造と属性を理解する必要があります。フォームの基本構造は次のとおりです。

<form action="xxx" method="xxx" enctype="xxx">
    表单控件
    <input type="xxx" name="xxx">
    ...
</form>

このうち、action 属性はフォーム送信先の URL アドレスを示し、method 属性はフォーム送信の URL アドレスを示します。リクエスト メソッド。通常、GET## が使用されます。# または POST、enctype 属性は、フォーム データのエンコード方法を示します。フォーム コントロールに関しては、フォーム要素とフォーム フィールドの 2 つのカテゴリに分類できます。

フォーム要素には、

d5fd7aea971a85678ba271703566ebfd、221f08282418e2996498697df914ce4e、4750256ae76b6b9d804861d8f69e79d3、bb9345e55eb71822850ff156dfde57c8が含まれます。 、2e1cf0710519d5598b1f0f14c36ba674など。

次のコードに示すように、フォーム フィールドはフォーム コントロールをグループ化し、識別します:

<fieldset>
    <legend>表单域名称</legend>
    ...
    表单控件
    <input type="xxx" name="xxx">
    ...
</fieldset>

2. JavaScript を使用してフォーム データを取得します

フォーム データの取得は送信の鍵ですフォーム ステップでは、次のメソッドを通じてフォーム データを取得できます。

// 获取表单对象
var formObj = document.forms[0]; // 或者 document.forms["form_name"];

// 获取表单控件值
var inputObj = formObj.elements["input_name"];
var inputValue = inputObj.value;

// 获取选择框选中的值
var selectObj = formObj.elements["select_name"];
var selectValue = selectObj.options[selectObj.selectedIndex].value;

// 获取多行文本框的值
var textareaObj = formObj.elements["textarea_name"];
var textareaValue = textareaObj.value;

このうち、

querySelector メソッドと querySelectorAll メソッドでも要素と要素コレクションを取得できます。 ##<pre class='brush:javascript;toolbar:false;'>var inputObj = document.querySelector('[name=&quot;input_name&quot;]'); var selectObj = document.querySelector('[name=&quot;select_name&quot;]'); var textareaObj = document.querySelector('[name=&quot;textarea_name&quot;]');</pre>3. フォーム データを変更してフォームを送信します

##フォーム データを取得したら、変更して処理します。例:

inputObj.value = "new_value";
textareaObj.value = textareaObj.value.toUpperCase();
selectObj.options[1].selected = true;

フォーム データが処理されたら、それをサーバーに送信する必要があります。現時点では、

submit()

メソッドを使用する必要があります:

formObj.submit();

フォームを送信する前に確認または検証する必要がある場合は、onsubmit

メソッドを使用できます。イベント:

formObj.onsubmit = function () {
    // 验证表单数据是否合法
    ...
    // 如果验证失败，则返回false取消表单提交
    if (!isValid) {
        return false;
    }
    // 验证成功，提交表单
    return true;
}

4. フォーム データの前処理と検証

フォーム送信前のデータの前処理と検証には、次の手法を使用できます:

// 对数据进行预处理
function preProcessData(formData) {
    formData.username = formData.username.toUpperCase();
    formData.password = formData.password.toLowerCase();
    ...
}

// 对数据进行验证
function validateFormData(formData) {
    if (!formData.username) {
        alert("请填写用户名！");
        return false;
    }
    if (!formData.password) {
        alert("请填写密码！");
        return false;
    }
    ...
    return true;
}

// 表单提交事件
formObj.onsubmit = function () {
    // 获取表单数据
    var formData = {
        username: inputUsername.value,
        password: inputPassword.value,
        ...
    };
    // 预处理表单数据
    preProcessData(formData);
    // 验证表单数据是否合法
    if (!validateFormData(formData)) {
        return false;
    }
    // 提交表单
    formObj.submit();
    return true;
}

上記はJavaScript フォーム送信の基本プロセス。実際の開発では、より完全で堅牢なフォーム送信機能を実現するために、特定のビジネスニーズに基づいてフォームの構造とデータに基づいて対応する処理と検証を実行する必要があります。

以上がJavaScriptを使用してフォームを送信する方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。