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


Related articles: