Home > Article > Web Front-end > Detailed explanation of how to use the jquery form plug-in form

Detailed explanation of how to use the jquery form plug-in form

迷茫Original: 2017-01-24 15:27:431620browse

Traditional form submissions are all in the form of page jumps, but ajax submission is more popular now. So if you want to have the simplicity of form submission and the effect of ajax, is there any solution?

How to use

Two ways to use:

The first way

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  // 使用ajaxForm
  $(function(){
   $("#myForm").ajaxForm(function(){
    $("#output1").html("提交成功").show();
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

Second way

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").submit(function(){
    // 使用ajaxSubmit
    $(this).ajaxSubmit(function(){
     $("#output1").html("提交成功").show();
    });
    return false;
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

It feels like the first way is more convenient.
The parameter function() is the callback function after successful submission.

Using this submission method, asynchronous form submission can be achieved, which is very convenient. However, it is still a bit unsatisfactory. For example, I may want to verify before submitting the form. Although it can be done manually outside of the form submission action, it is very troublesome. Does the form plug-in inherit such functionality?

2. Options parameter

The above only talks about one function callback function parameter in the form. In fact, it has another parameter, which is options. what's the function?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
 
  var options = {
   target:&#39;#output1&#39;,   // 把服务器返回的内容放入id为output1的元素中
   beforeSubmit: fun1,   // 提交前的回调函数
   success:  fun2,   // 提交后的回调函数
   dataType:     // 接收服务端返回的类型 xml,scrpit,json
  };
 
  // beforeSubmit前可以作验证
  function fun1(formData,jqForm,options){
   // formData 提交值的数组对象
   // jqForm 表单元素的jQuery对象，jqForm[0]是其dom对象
   // 该函数如果返回false，则阻止表单提交
 
   // formData可以判断全部不为空的情况
   for(var i=0;i<formData.length;i++){
    if(!formData[i].value){
     alert("都不能为空");
     return false;
    }
   }
 
   // jqForm可以判断某个不为空的情况
   var form = jqForm[0];
   if(!form.name.value){
    alert("name不能为空");
    return false;
   }
 
   // fieldValue()可以获取多值的数组形式，如checkbox
   var value = $(&#39;input[name=name]&#39;).fieldValue();
   if(!value[0]){
    return false;
   }
  }
  function fun2(responseText, statusText){
   // 根据dataType不同responseText解析方式不同，
   // 默认  responseText
   // xml  responseXml以xml解析
   // json  responseJson
  }
 
  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").ajaxForm(options); // 要想使options生效，需要作为参数传递
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

It can be seen that in the callback function fun1 of beforeSubmit, we have three ways to obtain form data: formData, jqForm, fieldValue, which satisfy various ways of obtaining values, and you can verify how you want. As long as it returns false, it can prevent the form from being submitted. The fun2 of the sucess callback also has status values and return data from the server. You can handle it how you want.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to Functional Programming in JavaScriptNext article：Introduction to Functional Programming in JavaScript

See more

Detailed explanation of how to use the jquery form plug-in form

Related articles