form表单实现前后台交互

参考由form表单来说说前后台数据之间的交互|form表单的进阶学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing form group</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <form action="" method="post" name='info' id='form'>
        <input type="text" name="user" />
        <input type="text" name="email" />
    </form>
    <button type="button" name='submit' onclick="onSubmit()">提交</button>
</body>
    <script type="text/javascript">
    function onSubmit(){
        var finalRes = $('#form').serializeArray().reduce(function(result, item){
             result[item.name] = item.value;
            return result;
        }, {})
    }
    </script>
</html>

form表单有两种提交方法：

使用button来收集表单信息然后校验并提交到服务器
直接在form表单中添加type=submit属性的input或者button类型的按钮，点击按钮后表单根据action和method的配置直接提交表单。

<input type = "submit" value = "提交" />

对于后一种提交表单的方式还有很多配置选项，包括enctype、accept和accept-charset。

type="submit" 和 type="button"

type="submit"是将表单提交(即form.submit()方法)作为其onclick后的默认事件。
type="submit"会自动将所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交。
type="submit"submit会有一个跳转，页面会刷新；

上面的3点对于type="button"统统都没有，type="button"只是一个单纯的点击，点击事件需要自行添加。使用表单事件处理函数onSubmit,你可以在函数内部校验参数，不成功就返回false，这样就可以阻止表单的提交了。

.serializeArray()
这是Jquery的方法，目的是为了搜集表单元素内部所有可以搜集的标签的name和value，然后组合成类似这种形式的对象值：{name:"xxx",value:"xxx"}。于是如果表单中有多个输入选项那么结果应该是这样的：

[{name:"xxx",value:"xxx"},{name:"xxx",value:"xxx"}....]

reduce()

这个是ES6新加的语法，具体用法可以参考MDN。

然后我们在这里使用它是为了将刚才序列化之后的值转变为Json数据，以最上面的代码为例子其结果应该是这样的：

{user:"xxxx",email:"xxxxxx"}

使用$.ajax()
用过Jquery的童鞋肯定都用过$.ajax()这个函数，其最普通的用法便是：

$.ajax({
    type: 'POST',
    url: ,
    data: ,
    dataType: 'json',
    success: function(data){successCallback(data)},
    error: function(jqXHR){failureCallback(jqXHR)},
})

ajax方法中几个重要的参数

contentType(当将数据发送到服务器时，使用该内容类型(或者叫编码类型)。)
data
发送到服务器的数据。它被转换成一个查询字符串,如果已经是一个字符串的话就不会转换。查询字符串将被追加到GET请求的URL后面。对象必须为"{键:值}"格式。
dataType(从服务器返回你期望的数据类型)

form表单实现前后台交互

猜你喜欢