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

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

黄舟

Libérer： 2018-05-26 16:32:23

original

21730 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

$("#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 
});

Copier après la connexion

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!