必看

友情提示，为了节约您宝贵的时间，可以往下拉，直接看 “正题”部分 。

前言

在小罗的文章中已经介绍了表单验证相关的方法，基本上我们要用表单同步提交数据的话，已经足够了。
但是经常会有这样一种情况：我想用semantic自带的表单验证方法去验证需要提交的信息，但我希望他是异步提交的，后续可以根据返回的结果来决定下一步前端的渲染走向。

正常来说

你去翻semantic的文档，会发现form validate里面有这样的参数设置:

Paste_Image.png

so,你完全可以这样

onSuccess:function(e){
    //阻止表单的提交
    e.preventDefault();
    //调用ajax提交
    $.ajax({
      ....
    })
}

以上代码原则上来讲执行起来并没有任何问题，但是恶心。在onSuccess回调里面写ajax、然后ajax里面还有回调，你写出来的代码会陷入很js很“经典”的Callback hell，代码会横向延长。

有没有更优雅的方式了？

有的，semantic自带了api接口：
先定义好api接口地址：

Paste_Image.png

然后调用：

Paste_Image.png

或者更复杂一点，

Paste_Image.png

上面代码做到了在类名为“form”的表单的"submit"按钮点击的时候，去请求“create user”服务，参数为form表单的各种input的值加上单独定义的"session:22"这个值。

万事具备

有的同学会说，这个.api()不是定义在submit按钮上的吗，和你说的优雅的方式有什么关系吗？
实际上来说，semantic的$('.form .submit')里面表单序列化之所以能成功，是因为semantic会自动去找$('.form .submit')的closest("form")，如果你用过这个'closest'方法，就知道，他是找父级元素的一个方法，并且你在form本身上使用的话，他的父级元素第一个是它本身！
如此，你想到了什么了？

正题

说了半天，变有了以下的代码

$('.ui.form').form({
    fields: {
        name: {
            identifier: 'name',
            rules: [{
                type: 'empty'
            }]
        }
    },
    onSuccess: function(e) {
        //阻止表单的提交
        e.preventDefault();
    }
}).api({
    action: 'create user',
    serializeForm: true,
    // arbitrary POST/GET same across all requests
    data: {
      session: 22
    },
    // modify data PER element in callback
    beforeSend: function(settings) {
      // cancel request if no id
      if( !$(this).data('id') ) {
        return false;
      }
      settings.data.userID = $(this).data('id');
      return settings;
    }
  })

没错，这样的连缀语法是可以的跑通的。并且可以做到表单验证不通过时不会调用下面的api方法，成功之后，序列化表单的值，然后异步提交。

有个坑，但已被我填了，就是semantic本身是不支持serilaizeForm的，需要引用另外一个插件：

Paste_Image.png

但这个插件本身有bug，就算你引用了也没有效果，我在“/js/common”目录下加了一个"serialize-object"的文件，重新覆盖了这个插件的方法。