Ajax请求

目录

1.ajax请求使用

2.增加任务列表功能(只有查看和新增)

3.代码展示集合

这篇文章, 要开始讲关于ajax请求的内容了。这个和以前文章中写道的Vue框架里面的axios请求, 很相似。后端代码, 会有一些细节点, 跟前几节文章写的有些区别。

一、ajax请求使用

我们先在templates文件夹下面新建ajax_data文件夹, 然后再创建ajax_data.html文件。

我们先讲ajax使用的方法:

$.ajax({
    //请求的目标地址
    url: "/demo/one/",
    // 请求类型
    type:"post",
    // 表单数据
    data:{
        sign: "45z6x4c65qf4c4c5z",
        type: "text"
    },
    //请求成功后，接受目标函数的数据
    success:function (res){
        // 这里面需要写请求成功之后, 需要做的事情
       console.log(res);
    }
})

说完ajax请求后, 我们需要写关于ajax使用的代码:

编辑ajax_data.html:

{% extends "index/model_tmp.html" %}
{% block content %}
    

        
Ajax演示-one
        
        
分类
                
名称
                
最高价
                
最低价
                
平均价
                
产地
            
            
        
Ajax演示-two
        
        
        
    
{% endblock %}
{% block js %}
    
        $(function () {
            bindBtnOne();
            bindBtnTwo();
        })
        function bindBtnOne() {
            $("#button-one").click(function () {
                $.ajax({
                    //请求的目标地址
                    url: "/demo/one/",
                    // 请求类型
                    type:"post",
                    // 表单数据
                    data:{
                        sign: "45z6x4c65qf4c4c5z",
                        type: "text"
                    },
                    //请求成功后，接受目标函数的数据
                    success:function (res){
                        //获取dict_data当中list所对于的值
                        var list = res.list;
                        var htmlStr = "";
                        for (var i=0; i
                            // emp相当于dict_data[list]当中的每一个字典
                            var emp = list[i];
                            //每次循环的时候，向页面添加一行六列
                            htmlStr += "