FormフォームをHTMLで送信した際にページがジャンプしないようにする方法を詳しく解説-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

FormフォームをHTMLで送信した際にページがジャンプしないようにする方法を詳しく解説

黄舟

May 26, 2018 pm 04:32 PM

form html ページ

1.1 解決策 1
フォームアクションはデータを送信しますが、ページがジャンプしない場合は、Iframe を使用して解決できます。
例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form提交表单页面不跳转</title>
</head>
<body>
    <form action="" method="post" target="myIframe">
        <label for="input_text">账户：</label>
        <input type="text" id="input_text" name="input_text">
        <label for="input_pwd">密码：</label>
        <input type="text" id="input_pwd" name="input_text">
        <input type="submit" id="submit" name="submit" value="提交">
    </form>
    <iframe id="myIframe" name="myIframe"></iframe>
</body>
</html>

ログイン後にコピー

注: Form 要素の target 属性は、返される結果を指定する iframe 要素の name 属性である必要があります。
iframe 要素は、本文またはフォーム要素内のどこにでも配置できます。
1.2 Ajaxを使用して実装されており、リフレッシュ技術はありません
JavaScriptを使用してinput要素の値を直接読み取り、それをajaxが処理する関数の変数に代入します。
例 - フォームデータをシリアル化するための js Serialize または SerializeArray メソッド:

<form>  
First name: <input type="text" name="FirstName" value="Bill" /><br />  
Last name: <input type="text" name="LastName" value="Gates" /><br />  
</form>  
<button id="btn">序列化表单值</button>

ログイン後にコピー

$("#btn").click(function(){
var x=$("form").serializeArray();  
console.log(x); //执行结果：[{name: "FirstName", value: "Bill" },{name: "LastName",  value: "Gates" }]
var y=$("form").serialize();
console.log(y); //执行结果：FirstName=Bill&LastName=Gates 
});

ログイン後にコピー

注: SerializeArray() メソッドは JSON 値を返し、serialize() メソッドは文字列値を返します。

以上がFormフォームをHTMLで送信した際にページがジャンプしないようにする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。