• notice
  • Congratulations on the launch of the Sought Tech site

jQuery asynchronous form submission prevents page refresh method

This article mainly solves the problem that the front-end page will be refreshed by default when the form is submitted with jQuery in the front-end, but after setting the method in this article, the front-end page can be submitted to the background without refresh and without perception.

Here we need to use the jquery component and jquery.form two components

Step 1: Introduce two components

<!--The files that jquery needs to import -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<!--ajax submission form needs to introduce jquery.form.js-->
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

Below I will directly attach the case, so you can understand it by looking at it.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>Title</title>
<!--The files that jquery needs to import -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>

<!--ajax submission form needs to introduce jquery.form.js-->
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

<script>
$(function () {
//Submit the form to the button with id ajaxSubmit
$("#ajaxSubmit").on("click",function () {
//alert(1);
$("#ajaxForm").ajaxSubmit({
beforeSubmit:function () {
// alert("I was called before submitting the form!");
},
success:function (data) {
//alert("I was called after submitting the form successfully");
if (typeof(data) == "string"){
data = eval( '('+data+')');
//alert(data); object
handle(data);
}else{
handle(data);
}

}
});
return false; // Prevent form auto submit event to prevent page jump
});
});
// process the returned data
function handle(data){
if(data.status == 200){
alert(data.message);
//processing logic
}else{
alert(data.message);
//processing logic
}
}
</script>

</head>
<body>
<form method="post" action="testAjax" id="ajaxForm">
Name: <input type="text" name="name"/><br>
Age: <input type="text" name="age"><br>

Gender: Male <input type="radio" value="man" name="sex" checked/> Female <input type="radio" value="woman" name="sex"/><br/>

<br><br><br>
<input type="submit" value="Synchronous submission"/> &nbsp;&nbsp;<input type="reset" value="Reset" />
<br> <br> <br>
<input type="button" value="Click my ajax to submit the form" id="ajaxSubmit"/>&nbsp;&nbsp;
</form>

</body>
</html>

Is it very simple, go try it now.

Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

atorvastatin 20mg generic & lt;a href="https://lipiws.top/"& gt;buy atorvastatin 80mg generic& lt;/a& gt; buy lipitor 20mg online

Zswdjg

2024-03-08

Leave a Reply

+