Django之Ajax代码

Posted on 2018-07-29 20:34 思南cx 阅读(48) 评论(0) 收藏举报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 15px;
            background: darkgoldenrod;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <select id="sel" multiple>
            <option value="1">上海</option>
            <option value="2">北京</option>
            <option value="3">广州</option>
        </select>
    </div>
    <div>
        <input placeholder="用户名" type="text" id="username" />
        <input placeholder="密码" type="password" id="password" />
        <div class="btn" onclick="submitForm();">提交</div>
    </div>
    <div>
        <input placeholder="数字" type="text" id="i1" />
        +
        <input placeholder="数字" type="text" id="i2" />
        <div class="btn" onclick="addForm();">等于</div>
        <input placeholder="数字" type="text" id="i3" />
    </div>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
        function submitForm() {
            var u = $('#username').val();
            var p = $('#password').val();
            $.ajax({
                url: '/ajax2.html',
                type: 'GET',
                data:{username: u,password:p},
                success:function (arg) {
                    console.log(arg);
                }
            })

        }
        
        function  addForm() {
            var v1 = $('#i1').val();
            var v2 = $('#i2').val();
            $.ajax({
                url: '/ajax3.html',
                type: 'POST',
                data: { "v1": v1, 'v2':v2},
                success:function (arg) {
                    $('#i3').val(arg);
                    // JS主动刷新页面
                    // window.location.reload();
                }
            })
        }
    </script>

</body>
</html>

View Code

-提交时，保留之前的内容？？？？
- 对话框 FM为form表单ID
- var data = $('#fmForm表单的ID').serialize();
$.ajax({
data: $('#fm').serialize() （获取所有值）
})

$.ajax({
    type: 'post',
    url: 'your url',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    }
});

刷新页面返回顶部

思南

公告

Django之Ajax代码