HTML中不同方式提交Form的区别

<script>
    // AJAX提交注册数据
    $("#reg-submit").click(function () {
        var email = $("#id_email").val();
        var phone = $("#id_phone").val();
        var username = $("#id_username").val();
        var nickname = $("#id_nickname").val();
        var password = $("#id_password").val();
        var repassword = $("#id_repassword").val();

        $.ajax({
            url: ‘/register_ajax_nofile/‘,
            type: ‘post‘,
            data: {
                email: email,
                phone: phone,
                username: username,
                nickname: nickname,
                password: password,
                repassword: repassword,
                csrfmiddlewaretoken: $(‘[name="csrfmiddlewaretoken"]‘).val()

            },
            success: function (data) {
                if (data.status == 1) {
                    // 有错误就展示错误
                    {#console.log(data.msg);#}
                    $.each(data.msg, function (k, v) {
                        console.log(k, v);
                        $(‘#id_‘ + k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    });
                } else if (data.status == 2) {
                    $(‘#other_error‘).text(data.msg);
                    $(‘#id_email‘).parent().parent().addClass("has-error");
                    $(‘#id_username‘).parent().parent().addClass("has-error");
                }
                else {
                    // 没错误就跳转
                    {#console.log("chengg");#}
                    {#console.log(data.msg);#}
                    location.href = data.msg;
                }
            }
        })
    });

    // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空
    $("form input").focus(function () {
        $(this).next().text("").parent().parent().removeClass("has-error");
    })
</script>

<script>

    // 找到头像的input标签绑定change事件
    $("#id_avatar").change(function () {
        // 1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到当前选中的头像文件
        // console.log(this.files[0]);
        // 读取你选中的那个文件
        fileReader.readAsDataURL(this.files[0]);  // 读取文件是需要时间的
        fileReader.onload = function () {
            // 2. 等上一步读完文件之后才 把图片加载到img标签中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });

    // AJAX提交注册数据
    $("#reg-submit").click(function () {
        var formData = new FormData();

        formData.append("email", $("#id_email").val());
        formData.append("phone", $("#id_phone").val());
        formData.append("username", $("#id_username").val());
        formData.append("nickname", $("#id_nickname").val());
        formData.append("password", $("#id_password").val());
        formData.append("repassword", $("#id_repassword").val());
        formData.append("avatar", $(‘#id_avatar‘)[0].files[0]);
        formData.append("csrfmiddlewaretoken", $(‘[name="csrfmiddlewaretoken"]‘).val());

        $.ajax({
            url: ‘/register_ajax_file/‘,
            type: ‘post‘,
            processData: false,  // 告诉jQuery不要处理我的数据
            contentType: false,  // 告诉jQuery不要设置content类型
            data: formData,
            success: function (data) {
                if (data.status == 1) {
                    // 有错误就展示错误
                    {#console.log(data.msg);#}
                    $.each(data.msg, function (k, v) {
                        {#console.log(k, v);#}
                        $(‘#id_‘ + k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    });
                } else if (data.status == 2) {
                    $(‘#other_error‘).text(data.msg);
                    $(‘#id_email‘).parent().parent().attr("class", "has-error");
                    $(‘#id_username‘).parent().parent().attr("class", "has-error");
                }
                else {
                    // 没错误就跳转
                    {#console.log("chengg");#}
                    {#console.log(data.msg);#}
                    location.href = data.msg;
                }
            }
        })
    });

    // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空
    $("form input").focus(function () {
        $(this).next().text("").parent().parent().removeClass("has-error");
    })
</script>