Django实现ajax提交-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Django实现ajax提交

简介: 场景:前端框架用layui, 提交的是textarea 页面: <form method="POST"> {% csrf_token %} <div class="layui-...

场景:前端框架用layui, 提交的是textarea

页面:


            <form method="POST">
                {% csrf_token %}                
                <div class="layui-form-item">
                    <div class="layui-col-md6 layui-col-xs-12">
                        <label class="layui-form-label">页面地址</label>
                        <div class="layui-input-inline">
                            <textarea class="layui-textarea" name="urlstext" placeholder="请输入地址(一行一条以http开头)"></textarea>
                            <button class="layui-btn" lay-submit="" lay-filter="srh">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-xs-12">
                        <label class="layui-form-label">查询结果</label>
                        <div class="layui-input-inline">
                            <textarea class="layui-textarea mg1em" name="res" id="resultstext">
                            </textarea>
                        </div>
                    </div>
                </div>
            </form>
javascript:


<script>
layui.use(['form', 'layer'], function () {
$ = layui.jquery;
var form = layui.form,layer = layui.layer;
var posting = false;
//监听提交
form.on('submit(srh)', function (data) {
    if (posting) return;
    posting = true;
    var loading = layer.load(1);
    var form = $(this).closest("form");
    $.ajax({
        url: "query",
        data: form.serialize(),
        dataType: 'json',
        method: 'POST',
        success: function (res) {
            var items = res.is_taken;
            if (items) {
                posting = false;
                layer.close(loading);
                $('#resultstext').val('');
                for(var itemindex in items){
                    $('#resultstext').val($('#resultstext').val()+items[itemindex]+'\n');
                }
            } else {
                posting = false;
                layer.close(loading);
                layer.msg("查询失败", { icon: 5 });
            }
        },
        error: function () {
            posting = false;
            layer.close(loading);
            layer.msg("查询失败", { icon: 5 });
        }
    });
    return false;
    });
});
</script>

服务端:


def query(request):
    urls = results = []
    res = request.POST.get("urlstext", "")
    #处理逻辑......
    data = { 'results': results }
    return JsonResponse(data)



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: