Form form submission, the method of the page does not jump
1.1 Solution One
form action submits data, but the page does not jump, you can use Iframe to solve it.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form submission form page does not jump</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>
Note: The target attribute of the Form element must be the name attribute of the iframe element that specifies the returned result to be displayed.
The Iframe element can be placed anywhere in the body, as well as in the form element.
1.2 Using Ajax to achieve, no refresh technology
directly reads the value of the input element with javascript, and then puts the variables in the function for ajax to process.
Example - js serialize or serializeArray method to serialize form data:
<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">Serialize form value</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); //Execution result: FirstName=Bill&LastName=Gates
});
Note: the serializeArray() method will return a json value, while the serialize() method will return a string value.