一般我们在html应用中会经常使用异步提交数据的方法。下面我们来看一段代码：

<form method="post" class="layui-form" >
 {% csrf_token %}
 <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" >
 <hr class="hr15">
 <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
 <hr class="hr15">
 <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
 <hr class="hr20" >
 <div class="layui-btn-danger">{{ msg }}</div>
</form>

这是个简单的form登录表单，下面是异步提交的方法：

<script>
 $(function () {
 layui.use('form', function(){
 var form = layui.form;
 // layer.msg('玩命卖萌中', function(){
 // //关闭后的操作
 // });
 //监听提交
 form.on('submit(login)', function(data){
 $.ajaxSetup({data: {csrfmiddlewaretoken: '{{ csrf_token }}'}});
 $.ajax({
 url: "/userlogin/"
 , method: 'POST'
 , data: data.field
 , success: function (data1) {
 console.log(data1);
 }
 });
 {#layer.msg(JSON.stringify(data.field),function(){#}
 {# location.href='/'#}
 {#});#}
 {#return false;#}
 });
 });
 })
</script>

其中data里就包括了你表单里面所有的提交内容，data1是Django返回的数据，是不是很简单。

登录错误页面展示

正常登录页面展示