onlineSchool 项目课 一：ajax提交

一，ajax异步提交的介绍
url：异步提交到对应的controller，提交的 url 地址要和@Request mapping与函数的名称对应上。

type：‘post’/'get '对应controller中 @PostMapping 或@GetMapping 注解，是接收提交的方式。

dataType：‘json’ 把提交后返回的数据格式转成json，返回的可以是从数据库中查询的数据，也可以没有返回的数据。但是必须要写，T必须要大写，是固定写法。可以 alert 一下resp.errorcode，如果是undefined，表示返回的数据没有转成json格式。

data：｛“id”：id｝通过触发函数，把当前操作的数据的id获取出来，当作ajax的参数异步提交到后台。
也可以把其他函数中获取的数据转成string类型，或Freemarket遍历出来的数据也可以当做参数提交到后台。引号内的参数名称要与函数中接收的参数名称一致。

success和err是ajax的回调函数。
success：表示ajax请求到controller，且请求成功，当返回的code是0，表示对数据操作成功，可以给成功的提示刷新或跳转页面。else返回的errcode是1，表示对数据操作失败，返回java中定义的失败提示。
err：表示ajax请求到controller请求失败，表示没有请求到controller，页面无法打开，有可能是url写错了，或者没有加注解，或者是在form表单里的input的类型设置成了submit。

二，提交方式的选择
1，如果不需要返回值，就选择同步提交submit，例如，提交分页的form表单。

<form id="queryForm" style="display: none">
    <input type="text" id="c" name="c">
    <input type="text" id="sortField" name="sortField">
    <input type="text" id="pageNum" name="pageNum">
</form>

function queryPage(pageNum,c,sortField) {
        $('#pageNum').val(pageNum);
        $('#c').val(c)
        if (sortField != null){
            alert(sortField)
            $('#sortField').val(sortField)
        }
        $('#queryForm').submit()
    }

2，如果需要返回值就选择异步提交，ajax或ajaxSubmit。
选择ajax是为了传参数。
ajaxSubmit为了保存数据到数据库，例如保存添加或修改的form表单中的数据到数据库。或者为了实现登录的form表单的提交。

三，ajax的应用场景
1，必须添加操作栏才能对数据进行操作。通过操作栏的触发函数，把当前操作的数据的id获取出来，ajax将id当作参数提交到controller。

<a href="javascript:void(0)" onclick="toEdit(${(items.id)!})">操作</a>

 function toEdit(id) {
        $.ajax({
            url:'${base}/getUser',
            type:'POST',
            dataType:'json',
            data:{'id':id},
            success:function (resp) {
                $('#_userModal').modal('show');
                $('#_userForm').fill(resp.data);
            }
        })
    }

2，controller根据id获取数据然后添加到modal。

 @RequestMapping("getUser")
 @ResponseBody
    public String getUser(AuthUser user){
        user = authUserService.getById(user.getId());
       return JsonView.successJson(user);
    }

3，前端通过封装的函数，通过name把返回的数据fill到form表单对应的输入框。

也可以将返回的数据针对行，通过freemarker遍历出来。

 <#list page.items as items>
 <tr>
 <td>${(items.realname)!}</td>
 <td>${(items.username)!}</td>
 <td>${(items.education)!}</td>
 <td>${(items.mobile)!}</td>
 </tr>
 </#list>

遍历要加判断，避免添加和修改共用一个页面或模态框，或二级数据没有数据。
另外，针对字段一行一行的遍历看看bean或者domain中有没有对应的字段映射吧。

	private String realname;//登录用户名
	private String username;//真实姓名
	private String education;//学历
	private String mobile;//手机号码

4，然后再使用ajaxSubmit提交修改后需要保存的form表单的数据。

function doSave() {
        $('#_userForm').ajaxSubmit({
            dataType: 'json',
            success:function (resp) {
                if (resp.errcode == 0){
                    $('#_userModal').modal('hide');
                    _queryPage();
                }else{
                    Modal.tipFailure("保存失败")
                }
            },
            error:function () {
                Modal.tipFailure("保存失败")
            }
        })
    }

6，提交到controller，在没有登录之前，是根据form表单中隐藏的input的id的值，区别是保存添加还是修改的数据。

<input id="id" name="id" type="hidden">

<input id="id" name="id" style="display: none">

7，也可以通过公共的模态框在confirm的回调函数中发起ajax请求，提交当前操作的数据的id，然后controller根据id删除数据。（删除课程的分类数据后面的文章会有详细的介绍）

function toDelete(id) {
        Modal.confirm("确定删除？",function(type){
            $.ajax({
                url:'${base}/deleteClassify',
                type:'POST',
                data:{"id":id},
                dataType: 'json',
                success: function(resp){
                    if(resp.errcode == 0){
                        window.location.reload();
                    }else{
                        Modal.alert(resp.message);
                    }
                }
            })
        });
    }

8，也可以不使用ajax提交id的方式，直接在a标签中或触发事件中带id参数请求到controller返回一个页面，页面中有通过id参数获取和遍历出来的数据。

<a href="${base}/course/${item.id!}"></a>

<div onclick="window.location.href='${base}/course/${item.id!}'"></div>

9，对于所有前台提交过来的数据，controller中接收以后，会先判断，如果为空返回错误信息。如果提交过来的是id，会根据id获取数据，获取为空再返回错误信息。获取的内容不为空再进行校验或接着执行代码。

  @RequestMapping("getCourse")
    @ResponseBody
    public String getCourse(Long id){
        if (null == id){
            return JsonView.failureJson("id为空，不允许修改");
        }
        Course course = this.courseService.getById(id);
        if (null == course){
            return JsonView.failureJson("课程不存在，无法修改");
        }

        return JsonView.successJson(course);
    }