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

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>

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>

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 :

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

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!