• Ajax传送数据,序列化组件,批量插入数据、sweetalert搭建页面,自定义分页器


    分页处理前后端代码
    后端:
    from django.core.paginator import Paginator
    class ComputerOfficeView(View):
        def get(self, request, *args, **kwargs):
            title = models.Title.objects.filter(title="电脑办公").first()
            title_id = title.id
            title_name = title.title
            course_obj_list = models.CourseDetail.objects.filter(title_id=title_id).all()
    
            current_page = request.GET.get("page", 1)
            # all_count = course_obj_list.count()
            p = Paginator(course_obj_list, 7)   # 定义分几页
            course_list = p.page(int(current_page))  # 取出第几页
            return render(request, 'computer_list.html', locals())

    前端:

                <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    {% if course_list.has_previous%}  # 判断是否有上一页
                                        <a href="{% url "computer" %}?page={{ course_list.previous_page_number }}" aria-label="Previous">
                                        {% else %}
                                         <a href="" aria-label="Previous">
                                    {% endif %}
    {#                                <a href="{% url "computer" %}" aria-label="Previous">#}
                                        <span>上一页</span>
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="{% url "computer" %}?page=1">1</a></li>
                                <li><a href="{% url "computer" %}?page=2">2</a></li>
                                <li><a href="{% url "computer" %}?page=3">3</a></li>
                                <li><a href="">...</a></li>
                                <li>
                                    {% if course_list.has_next %}  #是否有下一页
                                        <a href="{% url "computer" %}?page={{ course_list.next_page_number }}" aria-label="Next">
                                    {% else %}
                                        <a href="#" aria-label="Next">
                                    {% endif %}
    {#                                <a href="#" aria-label="Next">#}
                                        <span aria-hidden="true">&raquo;</span>
                                          <span>下一页</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        </div>


    MTV与MVC模型

    django框架 自称为是MTV框架
    M:models
    T:templates
    V:views

    MVC
    M:models
    V:views
    C:controller 控制器(urls)
    本质:MTV其实也是MVC






    Ajax
    异步提交 局部刷新
    请求方式 GET POST
    a标签href属性 GET请求
    浏览器窗口输入url GET请求
    form表单 GET/POST
    ajax GET/POST

    首先ajax这门技术 是js中的
    但是原生的js操作ajax比较繁琐,我们这里为了提高效率
    直接使用jQuery封装版本的ajax



    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    (这一特点给用户的感受是在不知不觉中完成请求和响应过程


    contentType前后端传输数据编码格式
    前后端传输数据编码格式
    1.urlencoded
    2.formdata
    3.json

    form表单
    默认使用的编码格式是urlencoded
    数据格式:name=jason&pwd=123
    django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取

    可以修改为formdata 传文件
    django后端针对只要是符合urlencoded编码格式的数据(name=jason&pwd=123)都会自动解析并放到request.POST中供用户获取
    如果是文件 只要你指定的编码是formdata 就会自动解析并放到request.FILES中
    总结:前后端传输数据的时候 一定要保证数据格式和你的编码格式是一致的 不能骗人家!!!

    ajax提交数据
    1.ajax默认数据提交方式也是urlencoded
    前端:
          $('#b1').on('click',function () {
                           alert(123)
                           // 点击按钮 朝后端发送post请求
                           $.ajax({
                               url:'',  // 控制发送给谁 不写就是朝当前地址提交
                               type:'post',  // 发送方式是post请求
                               data:{'i1':$('#i1').val(),'i2':$('#i2').val()},  // 发送的数据
                               success:function (data) {  // data形参用来接收异步提交的结果
                                   alert(data)
                                   // 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
                                   $('#i3').val(data)
                               }
    
                           })

    后端:
                  def index(request):
                         if request.is_ajax():  # 用来验证是否是ajax发送的请求,如果是True,说明是则true
                                   print(123)
                                   if request.method == "POST":
                                       print(123)
                                       d1 = request.POST.get("d1")
                                       d2 = request.POST.get("d2")
                                       res = int(d1) + int(d2)
                                       return HttpResponse(res)   # 发回给ajax回调函数data中
                               return render(request, "index.html")
    2.ajax发送json格式数据
    django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面
    它并不会解析json格式数据 而是将它原封不动的放在request.body中了
    前端:
    $('#b1').on('click',function () {
    alert(123)
    // 点击按钮 朝后端发送post请求
    $.ajax({
    url:'', // 控制发送给谁 不写就是朝当前地址提交
    type:'post', // 发送方式是post请求
    data:JSON.stringify({'username':'jason','password':123}), // 发送的数据
    contentType:'application/json', // 告诉后端你这次的数据是json格式

    success:function (data) { // data形参用来接收异步提交的结果
    alert(data)
    // 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
    $('#i3').val(data)
    }
    })
    {)
    后端:def index(request):
    if request.method == "POST":
    print(request.POST)
    print(request.body) # 获取到前端发送过json格式字典二进制
    json_str = request.body.decode("utf8") # 二进制解码
    s = json.loads(json_str) # 反序列化json字符串
    print(s.get("username")) # 取值
    return HttpResponse("ok")
    return render(request, "index.html")

    3.ajax传输文件
    // ajax传输文件
    前端:
      $('#d4').on('click', function () {
                           var formData = new FormData();  // 既可以传普通键值对,也可以传文件
                           formData.append('username', 'jason');
                           formData.append('psw', '123');
                           // 1.先用jQery查找到存储文件的input标签
                           // 2.将jQery对象转成原生js对象
                           // 3.利用原生js对象的方法.files.[0] 获取到标签内部存储的文件对象
                           formData.append('my_file',$('#d5')[0].files[0]);  // 获取文件标签所存储的文件对象
    
                           $.ajax({
                               url: '',  // 控制放给谁,不写就是默认当前提交
                               type: 'post',
                               data: formData,  // 传送数据就是formData
                               // ajax发送文件需要指定两个额外的参数
                               processData:false,  // 告诉前端不要处理数据
                               contentType:false,  // 不使用任何编码  ,formdata自身自带编码,django后端也能自动识别
                               success: function (data) {  //回调函数,把数据发送给后端返回 data形参用来接收异步提交的结果
                                   alert(data);
                                   $('#d3').val(data)
                                   }
                               })
                           

    后端:
    # ajax传送文件到后端
                               if request.method == "POST":
                                   print(request.FILES)    # 拿到文件的字典
                                   with open("今日内容","wb") as f:     # 写入文件
                                       for line in request.FILES.get("my_file"):
                                           f.write(line)
                                   print(request.POST)   # 拿到输送的普通数据
                                   print(request.POST.get("username"))   # 拿到输送的普通数据
                                   return HttpResponse("ok")
    
                               return render(request, "index.html")

     批量插入数据:

            1 bulk_create()  批量插入数据
                # for i in range(1000):
                #     models.Book.objects.create(title='第%s本书'%i)
                # 上面这种方式 效率极低
    
                l = []
                for i in range(10000):
                    l.append(models.Book(title='第%s本书'%i))  # 生成对象直接插入
                models.Book.objects.bulk_create(l)  # 批量插入数据
  • 相关阅读:
    Rainmeter 雨滴桌面 主题分享
    行人检測之HOG特征(Histograms of Oriented Gradients)
    const和readonly差别
    ADB命令解析
    Java实现 蓝桥杯VIP 算法训练 接水问题
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
  • 原文地址:https://www.cnblogs.com/wukai66/p/11575457.html
Copyright © 2020-2023  润新知