zoukankan      html  css  js  c++  java
  • 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)  # 批量插入数据
  • 相关阅读:
    Tsinsen-A1489 抽奖 【数学期望】
    jmeter正则表达式
    robotframwork的WEB功能测试(一)—切换window窗口
    Appium基础篇(一)——启动emulator
    20161114记录一件工作的事
    robotframwork数据库测试(一)——pymysql与pyodbc
    robotframwork接口测试(四)—其他库的安装
    robotframwork接口测试(三)—HttpLibrary.HTTP安装
    robotframework接口测试(二)—post request
    robotframework接口测试(一)—Get request json
  • 原文地址:https://www.cnblogs.com/wukai66/p/11575457.html
Copyright © 2011-2022 走看看