jQuery使用ajaxSubmit()提交表单示例_jquery-js教程-PHP中文网

jQuery使用ajaxSubmit()提交表单示例_jquery

php中文网

发布： 2016-05-16 16:53:21

原创

1389人浏览过

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。如下所示：

复制代码代码如下:

那么，如何通过ajaxSubmit(obj)提交数据呢？首先我们需要一个form：

XHTML

第三波网上书店源码

网络购物已经随着Ineternet的飞速发展而得到越来越多应用。为了提高交易效率，节省人们的宝贵时间，我们开发了这套稳定可靠、操作方便、安全有效的时尚购书系统，它主要分为前台和后台两大模块：（前台）使用了站点地图，显示您所在网站的位置。首页图书列表显示，用户登陆，用户注册，列出图书详细，购物车功能，以及结算等。（后台）图书、用户的添加，删除，修改等操作，查看客户的订单及修改该项目采用三层结构开

查看详情

复制代码代码如下:

上面是一个需要提交内容的form，通常情况下，我们直接通过form提交的话，提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。使用方法如下所示：

复制代码代码如下:

$('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).resetForm(); // 提交后重置表单
        });
        return false; // 阻止表单自动提交事件
    });
});