Home > Article > Web Front-end > 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!