关于form表单提交问题

Question

现在要写一个注册页面，请问用form表单提交和 直接取input 的vlaue 值提交，这两种方式的区别是什么？原来一直都是用直接取值的方式做的登录、注册这种页面；

或者下面写法有问题的麻烦指点一下

form表单方式

<form  id="form">
        <div>
            <label for="username">请输入用户：</label>
            <input type="text" name="username" required="required" placeholder="请输入用户名" id="username">
        </div>
        <div>
            <label for="mobile">请输入电话：</label>
            <input type="text" name="mobile" required="required" placeholder="请输入电话：" id="mobile">
        </div>
        <div>
            <label for="password">请输入密码：</label>
            <input type="password" name="password" required="required" placeholder="密码" id="password">
        </div>
        <input type="submit" value="注册" class="btn">
    </form>
    
    //js 
     form = $("#form");
    form.data().submit = function (){
        form.data() = $.post(url,{
            username:form.data().username,
            mobile: form.data().mobile,
        })
    }

直接取值方式

<input type="text" name="username" required="required" placeholder="请输入用户名" id="username">
<input type="text" name="mobile" required="required" placeholder="请输入电话：" id="mobile">

//js
var username = $('username').val();
var mobile= $('mobile').val();

$.post(url,{
    username:username,
    mobile:mobile
});

这两中方式的优劣在哪里？先不考虑表单验证问题

Answer 1

1、“直接取值”，的方法看起来比较直接，适合实现较为小的表单功能。
2、“jQ表单提交”，的方法是jq库对表单常用的功能进行的封装，适合实现稍微复杂的功能。
3、H5新特性里，也增加了表单的一些新属性和标签，方便我们直接操作表单。比如submit按钮等，详情查看api。
4、我扩展下，angular（2以上版本）为我们提供了2种表单方式，一是模板驱动表单（适和简单功能），二是响应式表单（可以实现更为复杂的功能，易于后期维护，代码更为美观）。
4、无论是哪种方式，性能都不会有很大差异，不然官方不会对外公布相应的api，即便有性能上的问题，测试版本中也会对其优化，这不应该是我们考虑的主要问题。
5、综上所述，我的建议是，使用“jQ表单提交”方法。不过按照自己的需求，题主斟酌。

Answer 2

没有本质区别，Jquery取表单data的操作和你直接取input的value是一样的。