Detailed explanation of how jQuery uses ajaxSubmit() to submit form instances

This article mainly introducesjQueryUsing ajaxSubmit() to submit a form example, using the extended third-party plug-in jquery.form to implement it. Friends who need it can refer to it

ajaxSubmit(obj) The method is a method in jquery.form.js, a plug-in of jQuery, so you need to introduce this plug-in first to use this method. As shown below:

The code is as follows:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

So, how to submit data through ajaxSubmit(obj)? First we need a form:

XHTML

The code is as follows:

<form>
    标题：<input type="text" name="title" /><br />
    内容：<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>

The above is a form that needs to submit content, usually , if we submit directly through the form, the current page will jump to the page pointed to by action of the form after submission. However, many times we do not want the page to jump after submitting the form, then we can use ajaxSubmit(obj) to submit the data. The usage method is as follows:

The code is as follows:

$('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; // 阻止表单自动提交
事件
    });
});

The above is the detailed content of Detailed explanation of how jQuery uses ajaxSubmit() to submit form instances. For more information, please follow other related articles on the PHP Chinese website!