Heim Web-Frontend js-Tutorial Erfahren Sie schnell, wie Sie das jQuery-Plug-in Form form plug-in_jquery verwenden

Erfahren Sie schnell, wie Sie das jQuery-Plug-in Form form plug-in_jquery verwenden

May 16, 2016 pm 03:28 PM
jquery

Das jQuery-Formular-Plug-in ist ein hervorragendes Ajax-Formular-Plug-in, mit dem HTML-Formulare einfach und nicht-invasiv aktualisiert werden können, um Ajax zu unterstützen. jQuery Form verfügt über zwei Kernmethoden – ajaxForm() und ajaxSubmit(), die Funktionen von der Steuerung von Formularelementen bis hin zur Entscheidung, wie der Übermittlungsprozess verwaltet werden soll, kombinieren. Darüber hinaus enthält das Plug-in auch andere Methoden: formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() und resetForm() usw.
Kernmethoden – ajaxForm() und ajaxSubmit()

1

2

3

4

5

6

7

8

9

10

$('#myForm').ajaxForm(function() { 

 $('#output1').html("提交成功!欢迎下次再来!").show(); 

});

    

$('#myForm2').submit(function() {

 $(this).ajaxSubmit(function() { 

  $('#output2').html("提交成功!欢迎下次再来!").show(); 

 });

 return false; //阻止表单默认提交

});

Nach dem Login kopieren

Über die beiden Kernmethoden des Formular-Plug-Ins können Sie die Formularübermittlungsmethode problemlos auf die Ajax-Übermittlungsmethode aktualisieren, ohne die HTML-Codestruktur des Formulars zu ändern. Sowohl ajaxForm() als auch ajaxSubmit() können 0 oder akzeptieren 1 Parameter. Wenn es sich um einen einzelnen Parameter handelt, kann der Parameter entweder eine Callback-Funktion oder ein Optionsobjekt sein Das obige Beispiel ist die Callback-Funktion und das folgende Einführung des Optionsobjekts, um ihnen mehr Kontrolle über das Formular zu geben:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

var options = {

 target: '#output',   //把服务器返回的内容放入id为output的元素中 

 beforeSubmit: showRequest, //提交前的回调函数

 success: showResponse,  //提交后的回调函数

 //url: url,     //默认是form的action, 如果申明,则会覆盖

 //type: type,    //默认是form的method(get or post),如果申明,则会覆盖

 //dataType: null,   //html(默认), xml, script, json...接受服务端返回的类型

 //clearForm: true,   //成功提交后,清除所有表单元素的值

 //resetForm: true,   //成功提交后,重置所有表单元素的值

 timeout: 3000    //限制请求的时间,当请求大于3秒后,跳出请求

}

  

function showRequest(formData, jqForm, options){

 //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]

 //jqForm: jQuery对象,封装了表单的元素 

 //options: options对象

 var queryString = $.param(formData); //name=1&address=2

 var formElement = jqForm[0];    //将jqForm转换为DOM对象

 var address = formElement.address.value; //访问jqForm的DOM元素

 return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证

};

  

function showResponse(responseText, statusText){

 //dataType=xml

 var name = $('name', responseXML).text();

 var address = $('address', responseXML).text();

 $("#xmlout").html(name + " " + address);

 //dataType=json

 $("#jsonout").html(data.name + " " + data.address);

};

  

$("#myForm").ajaxForm(options);

  

$("#myForm2").submit(funtion(){

 $(this).ajaxSubmit(options);

 return false; //阻止表单默认提交

});

Nach dem Login kopieren

Überprüfen Sie vor dem Absenden des Formulars: beforeSubmit wird vor dem Absenden des Formulars aufgerufen. Wenn beforeSubmit „false“ zurückgibt, wird das Absenden des Formulars verhindert

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

beforeSubmit: validate

function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止

 //方式一:利用formData参数

 for (var i=0; i < formData.length; i++) {

  if (!formData[i].value) {

   alert('用户名,地址和自我介绍都不能为空!');

   return false;

  }

 }

  

 //方式二:利用jqForm对象

 var form = jqForm[0]; //把表单转化为dom对象

  if (!form.name.value || !form.address.value) {

   alert('用户名和地址不能为空,自我介绍可以为空!');

   return false;

  }

  

 //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。

 var usernameValue = $('input[name=name]').fieldValue();

 var addressValue = $('input[name=address]').fieldValue();

 if (!usernameValue[0] || !addressValue[0]) {

  alert('用户名和地址不能为空,自我介绍可以为空!');

  return false;

 }

  

 var queryString = $.param(formData); //组装数据

 //alert(queryString); //类似 : name=1&add=2

 return true;

}

Nach dem Login kopieren

Der Artikel stellt detailliert vor, wie man das Form-Formular-Plug-in verwendet. Ich hoffe, dass jeder es sorgfältig studiert und etwas daraus gewinnt.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Feb 27, 2024 pm 06:45 PM

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery?

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

Wie entferne ich das Höhenattribut eines Elements mit jQuery?

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite

Eingehende Analyse: Vor- und Nachteile von jQuery Eingehende Analyse: Vor- und Nachteile von jQuery Feb 27, 2024 pm 05:18 PM

Eingehende Analyse: Vor- und Nachteile von jQuery

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Feb 28, 2024 pm 01:15 PM

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?

See all articles