Detailed Explanation of jQuery Form Plug in ajaxForm Instance
- 2021-07-12 04:36:11
- OfStack
ajaxForm plug-in is used in front-end time writing projects, which can be used to submit forms and upload pictures. It sounds no different from normal form form submission, but ajax submission, without refreshing the page, which can increase the user experience.
Introduce two files, PS: Must
<script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery.form.min.js"></script>
The usage method is as follows:
html code:
<form method="post" action="#" id="submit">
Title: <input type="text" name="title" value=""/>
Picture: <input type="file" name="image"/>
<input type="button" value=" Submit " id="button"/>
</form>
js code:
<script type="text/javascript">
$('#button').click(function(){
var options = {
type:'post', //post Submit
url:'http://ask.tongzhuo100.com/server/****.php?='+Math.random(), //url
dataType:"json", //json Format
data:{'name':name,....}, // If you need to submit additional parameters, add them as appropriate
clearForm: true, // After successful submission, clear the values of all form elements
resetForm: true, // Reset the values of all form elements after successful submission
cache:false,
async:false, // Synchronous return
success:function(data){
// Server-side return processing logic
},
error:function(XmlHttpRequest,textStatus,errorThrown){
alert(' Operation failed ');
}
};
$('#submit').ajaxSubmit(options);
})
</script>
This is probably the usage, Two pits were encountered, I encapsulated ajaxform with a method, Because the project is used many times, and then the synchronization request is used, it is easy to handle, but without picture uploading, synchronization is possible and compatible with ie7, but if there is picture uploading, ie 7, 8, 9 synchronization cannot be processed, only asynchronous, so it can only be written asynchronous at that time, and the processing done separately in success is more painful...