Form的提交

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="oauth">
  <div class="oauth_logo">
    <img src="/oauth/image/oauth.png"></div>
  <div class="oauth_logo_title">
    <span class="str">授权第三方获取您的
      <span class="str1" onclick="openData()">开放数据</span></span>
    <span th:text="${explain}"></span>
  </div>
  <div class="oauth_login">
    <form id="oauth_from_id" method="POST" name="oauth_from" enctype="application/x-www-form-urlencoded" target="oauthLoginFrame">
      <div class="oauth_login_1">
        <input type="text" required="required" placeholder="请输入登录账号" name="userName" id="username"></input>
      </div>
      <div class="oauth_login_1 oauth_login_2">
        <input type="password" required="required" placeholder="请输入登录密码" name="passWord" id="password"></input>
      </div>
      <div class="oauth_login_button" id="oauth_login_button">
        <button class="oauth_login_button_1" id="oauth_login_button" type="submit" onclick="oauthLogin()">登录并授权</button>
        <div class="oauth_login_button_2">
          <span class="oauth_login_button_2_1">下载APP与注册账户,
            <a href="#" onclick="loadAPP()">点击这里。</a></span>
        </div>
      </div>
    </form>
    <iframe id="oauthLoginFrame" name="oauthLoginFrame" style="display:none"></iframe>
  </div>
</div>
</div>

JS

Ajax提交Form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var ajaxFlag;
function oauthLogin2() {
    if (ajaxFlag) {
        return; //终止上一条请求,防止重复请求
    }
    var loginForm = $('#oauth_from_id');
    ajaxFlag = loginForm.submit(function(ev) {
        $.ajax({
            async: false,
            //关闭一步请求
            type: loginForm.attr('method'),
            url: loginForm.attr('action'),
            dataType: "json",
            contentType: loginForm.attr('enctype'),
            data: loginForm.serialize(),
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            //发送请求前运行的函数
            beforeSend: function(xhr) {
                console.log("beforeSend-status:" + xhr.status);
                console.log("beforeSend-state:" + xhr.readyState);
            },
            //当请求成功时运行的函数
            success: function(result, status, xhr) {
                console.log("success-result:" + result);
                console.log("success-status:" + status);
                console.log("success-xhr-status:" + xhr.status);
                console.log("success-xhr-state:" + xhr.readyState);
                var code = result.code;
                var msg = result.msg;
                var des = result.des;
                if (21333 == code) {
                    swal("授权失败", des, "error");
                } else if (21319 == code) {
                    swal("授权成功", des, "success");
                } else {
                    swal("授权失败", "授权发生错误,请稍后重试!", "error");
                }
            },
            //用于处理 XMLHttpRequest 原始响应数据的函数
            dataFilter: function(data, type) {
                console.log("dataFilter-data:" + data);
                console.log("dataFilter-type:" + type);
            },
            //如果请求失败要运行的函数。
            error: function(xhr, status, error) {
                console.log("error-xhr-status:" + xhr.status);
                console.log("error-xhr-state:" + xhr.readyState);
                console.log("error-status:" + status);
                console.log("error-error:" + error);
                var url = xhr.getResponseHeader("location");
                console.log("error-url:" + url);
            },
            //请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)
            complete: function(xhr, status) {
                console.log("complete-xhr-status:" + xhr.status);
                console.log("complete-xhr-state:" + xhr.readyState);
                console.log("complete-status:" + status);
                console.log("complete-url:" + xhr.getResponseHeader("Location"));
                console.log("complete-all-header:" + xhr.getAllResponseHeaders());
                if ((xhr.status >= 300 && xhr.status < 400) && xhr.status != 304) {
                    //重定向网址在响应头中,取出再执行跳转
                    window.location.href = xhr.getResponseHeader('X-Redirect');
                    window.location.href = xhr.getResponseHeader('Location');
                }
            },
        });
        ev.preventDefault();
    });
}

Iframe提交Form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function oauthLogin() {
    $('#oauth_login_button').on('click',
    function(XMLHttpRequest, textStatus, errorThrown, event) {
        var timeSet = setInterval(function() {
            try {
                var iframeObj = $(window.frames["oauthLoginFrame"].document);
                var val = iframeObj.find("body").find("pre").html();
                if (val != "" && val.indexOf("code") != -1 && val.indexOf("msg") != -1) {
                    var successData = JSON.parse(val);
                    var code = successData.code;
                    var msg = successData.msg;
                    var des = successData.des;
                    if (21333 == code) {
                        swal("授权失败", des, "error");
                        clearInterval(timeSet);
                        return false;
                    } else {
                        swal("授权成功", "该第三方已可获得您的信息。", "success");
                        clearInterval(timeSet);
                        return true;
                    }
                } else {
                    return false;
                }
            } catch(err) {
                return false;
            }
        },
        1000);
    });
}