Maison >interface Web >tutoriel HTML >Explication détaillée de la façon d'empêcher la page de sauter lorsque le formulaire Form est soumis en HTML

Explication détaillée de la façon d'empêcher la page de sauter lorsque le formulaire Form est soumis en HTML

黄舟
黄舟original
2018-05-26 16:32:2321778parcourir


1.1 Solution 1
L'action du formulaire soumet les données, mais la page ne saute pas. Vous pouvez utiliser Iframe pour résoudre ce problème.
Exemple :

<!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>

Remarque : L'attribut target de l'élément Form doit être l'attribut name de l'élément iframe qui spécifie le résultat renvoyé.
Les éléments Iframe peuvent être placés n'importe où dans le corps ou dans des éléments de formulaire.

1.2 Implémenté en utilisant Ajax, pas de technologie de rafraîchissement
Utilisez javascript pour lire directement la valeur de l'élément d'entrée, puis placez-la dans la variable de la fonction pour qu'Ajax la traite.
Exemple - méthode js serialize ou SerializeArray pour sérialiser les données du formulaire :

<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 
});

Remarque : la méthode SerializeArray() renverra un json valeur, et la méthode serialize() renverra une valeur de chaîne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn