Maison > interface Web > js tutoriel > Explication détaillée de la façon dont jQuery utilise ajaxSubmit() pour soumettre des instances de formulaire

Explication détaillée de la façon dont jQuery utilise ajaxSubmit() pour soumettre des instances de formulaire

巴扎黑
Libérer: 2017-07-03 10:47:43
original
2265 Les gens l'ont consulté

Cet article présente principalement l'exemple jQuery d'utilisation d'ajaxSubmit() pour soumettre un formulaire, qui est implémenté à l'aide du plug-in tiers étendu jquery.form. Les amis dans le besoin peuvent se référer à

ajaxSubmit(obj) La méthode est une méthode dans jquery.form.js, un plug-in de jQuery, vous devez donc d'abord introduire ce plug-in pour utiliser cette méthode. Comme indiqué ci-dessous :

Le code est le suivant :

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
Copier après la connexion
Alors, comment soumettre des données via ajaxSubmit(obj) ? Nous avons d'abord besoin d'un formulaire :

XHTML


Le code est le suivant :

<form>
    标题:<input type="text" name="title" /><br />
    内容:<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>
Copier après la connexion


Ce qui précède est un formulaire qui nécessite pour soumettre du contenu, généralement Dans ce cas, si nous soumettons directement via le formulaire, après la soumission, la page actuelle passera à la page pointée par l'
action du formulaire. Cependant, souvent, nous ne voulons pas que la page saute après la soumission du formulaire, nous pouvons alors utiliser ajaxSubmit(obj) pour soumettre les données. La méthode d'utilisation est la suivante :

Le code est le suivant :

$(&#39;button&#39;).on(&#39;click&#39;, function() {
    $(&#39;form&#39;).on(&#39;submit&#39;, function() {
        var title = $(&#39;inpur[name=title]&#39;).val(),
            content = $(&#39;textarea&#39;).val();
        $(this).ajaxSubmit({
            type: &#39;post&#39;, // 提交方式 get/post
            url: &#39;your url&#39;, // 需要提交的 url
            data: {
                &#39;title&#39;: title,
                &#39;content&#39;: content
            },
            success: function(data) { // data 保存提交后返回的数据,一般为 
json
 数据
                // 此处可对 data 作相关处理
                alert(&#39;提交成功!&#39;);
            }
            $(this).
reset
Form(); // 提交后重置表单
        });
        
return
 false; // 阻止表单自动提交
事件
    });
});
Copier après la connexion


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal