form通过ajax以json发送,接受json数据做处理

{% extends "base.html" %}

{% block title %}register{% end %}
{% block head %}
    <script type="text/javascript" src="{{ static_url('js/jquery-1.12.4.min.js') }}"></script>

    <script type="text/javascript">
        function login() {
            var username = document.getElementById("user_name").value;
            var password = document.getElementById("pass_word").value;
            var mobile = document.getElementById("mobile").value;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '/test',
                contentType: "application/json",
                data:JSON.stringify({
                    "username": username,
                    "password": password,
                    "mobile": mobile,
                }),
                success: function (result) {
                    if (result.code == 200) {
                        let url = result.url
                        window.location.href = url;
                    }else {
                        alert(result.message)
                    }
                }
            });
        }
    </script>


{% end %}

{% block content %}
    <h1 style="text-align: center">
        {{ data }}
    </h1>

    <form>
        <p><input type="text" id="user_name" name="username"  placeholder="用户名"></p>
        <p><input type="password" id="pass_word" name="password"  placeholder="密码"></p>
        <p><input type="text" id="mobile" name="mobile"  placeholder="手机号"></p>
        <input type="button" value="登 录"  onclick="login()">
    </form>
{% end %}
原文地址:https://www.cnblogs.com/yblackd/p/14533391.html