关于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表单提交”方法。不过按照自己的需求，题主斟酌。