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)



目录
相关文章
|
20天前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
3月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
3月前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
4月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
39 0
|
4月前
|
JSON 前端开发 JavaScript
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
|
4月前
|
JSON 前端开发 JavaScript
前端知识笔记(三十七)———Django与Ajax
前端知识笔记(三十七)———Django与Ajax
45 0
|
4月前
|
JSON 前端开发 JavaScript
前端知识笔记(二)———Django与Ajax
前端知识笔记(二)———Django与Ajax
53 0
|
1月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
|
1月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
|
9天前
|
前端开发 搜索推荐 算法
中草药管理与推荐系统Python+Django网页界面+推荐算法+计算机课设系统+网站开发
中草药管理与推荐系统。本系统使用Python作为主要开发语言,前端使用HTML,CSS,BootStrap等技术和框架搭建前端界面,后端使用Django框架处理应用请求,使用Ajax等技术实现前后端的数据通信。实现了一个综合性的中草药管理与推荐平台。具体功能如下: - 系统分为普通用户和管理员两个角色 - 普通用户可以登录,注册、查看物品信息、收藏物品、发布评论、编辑个人信息、柱状图饼状图可视化物品信息、并依据用户注册时选择的标签进行推荐 和 根据用户对物品的评分 使用协同过滤推荐算法进行推荐 - 管理员可以在后台对用户和物品信息进行管理编辑
39 12
中草药管理与推荐系统Python+Django网页界面+推荐算法+计算机课设系统+网站开发