jquery.form.js implements a method to convert an form submission to an ajax submission

  • 2020-05-27 04:14:22
  • OfStack

This article demonstrates an example of how the jquery.form.js implementation converts an form submission to an ajax submission. Share with you for your reference. The specific analysis is as follows:

This framework integrates the submission, validation, and upload capabilities of form.
This framework must be combined with the full jquery version, otherwise min will not work.
Principle: js is used to assemble form into url and data of ajax. The principle is still submitted by ajax. In fact, you can write it by yourself, but it may be simpler with this framework.

1. Simplest example:

Step 1: quote js


<!-- Here, min They are for my own use js The compression of the full version by the compression tool 
 Not really min , so it works -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Step 2: write form on the page


<form id="showDataForm" 
action="/024pm/f_shopUser.do?method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value=" submit "/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

Step 3: write js and call jquery.form.js to submit ajax for the form form


$(document).ready(function() {
 var options = {
  target: '#output1',
  //  The data from the service is shown here div internal 
  That is ajax Local refresh 
  beforeSubmit: showRequest,
 // ajax Processing before submission 
  success:  showResponse
 //  Processing after processing 
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  // Very important, if yes false , it indicates that it does not jump 
  // On this page, that is ajax If not false , is traditional form Jump. 
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr It says you can use it ajax To make your own request again 
//$form : is that form Object, it is 1 a jquery object 
//statusText : state, success is success
//responseText , the server returns a string (including, of course, a string) html , not including json ) 
}
function showRequest(formData, jqForm, options) {
 //formData It's an array, it's individual input The key value map An array of 
 // This is the method by which we're going to process it and come up with a string. 
 //formData : put it together form String, such as name=hera&password . 
 // It's really just in the form input Key value pair of, 
 // If you add method=XXXX That's the same thing as ajax Within the data . 
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm . jquery form object 
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 // Very important. Return true The description is submitted ajax Before you verify 
 // Successful, submit ajax form
 // If the validation is unsuccessful, a non is returned true Don't submit 
 return true;
}

2. What are the values in the options object?

The main ones are the following common attributes:


var options = {
 target: '#output1', 
 data:{param1:" My own 1 Two extra parameters "},
// This parameter means pass ajax To submit to the server form internal input The parameters of the 
// Use in the background String param1=req.getParameter("param1"); To obtain. 
 // dataType: null,
 dataType:'json',
// The value of this parameter is the data type returned by the server, and the default is null
// That is, the server can return strings by default and then put them in target internal 
// Of course, json , xml , one of the most commonly used null and json
// for json We'll talk about that later 
 beforeSubmit: showRequest,
 success:  successRes . 
 type : 'POST'
 // Submit method, default is in form Specified on the label method
 // If not specified, use get . 
 url : ''
 // resubmitted url , i.e., url Can be found in form In the configuration 
 // It can also be configured here. 
};

3. How to parse the json data passed from the server

As we know, using the ajax method provided by jquery, if the server sends back json data, it is an json object that can be converted to js, and then the corresponding value can be obtained by json.xxx. What about this framework?
1) first specify dataType: 'json' in options parameter
2) submit through the framework
3) server reception
4) the server returns json
5) page js receives json
The key is step 5, how js receives json, which can be done internally through the success: specified method as follows:


var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
// Attention, successRes The method does not appear to have arguments 
// But why should the following method have arguments? It can be passed like this. 
function successRes(jsonData){
 alert(jsonData.param1);
}

4. How do you do simple validation with this framework?

When it comes to validation, it must be done inside the beforeSubmit method. How to verify, because this method has already passed jqform object and formData to you, you can take these two parameters to get the corresponding input, and then make your own judgment. If the judgment is successful, you will submit it.


function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  // Verify completion 
  alert('input There is no option to fill in ');
  // If the validation does not pass, it returns false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

The jquery.form.js file can be downloaded from this site.

I hope this article has been helpful to your jQuery programming.


Related articles: