ajax请求

Posted 2020-12-08 relaxlee

ajax请求

ajax请求特性

1. 异步执行

2. 局部刷新

ajax语法

基于javascript

<script>
    $(".btn_submit").click(function () {   /js语法格式: $ 即jquery “.btn" .标识class属性  "#usr" #标识id属性
        const usr = $("#usr").val();  / val()获取值， 即获取id为usr的标签的值。 val(1) 赋值
        const pwd = $("#pwd").val();

        $.ajax({
            url: "{% url "login" %}",  /ajax请求路径
            type: "post",			  /ajax请求方法
            data: {					  /ajax请求内容(参数), 即请求体
                csrfmiddlewaretoken: "{{ csrf_token }}",  /post请求需要携带的csrf_token认证
                usr: usr,
                pwd: pwd
            },
            success: function (response) {    / 回调函数, 服务器响应成功后执行的函数,response,响应内容即响应体
                const res_obj = JSON.parse(response);
                if (res_obj.user){
                    $(".errshow").html("登陆成功")
                }else{
                    $(".errshow").html(res_obj.err)

                }
            }
        })
    })
</script>

• js中的text()，html() ，val()的区别

  text()，html() ，val()三个方法用于html元素的存值和取值

  • text()用于html元素文本内容的存取
  • html()不但可以用于html元素文本内容的存取，还可以用于html内容的存取。
  • val()用于input元素内容的存取。

• js遍历

  each

  $.each(obj, function(i, j){
      console.log(i,j)
  })
  

• 查找父节点

  $(this).parent()
  

  <table class="table table-bordered table-hover table-striped">
      {% csrf_token %}
      <thead>
      <tr>
          <th>编号</th>
          <th>书籍名称</th>
          <th>价格</th>
          <th>出版日期</th>
          <th>出版社</th>
          <th>作者</th>
          <th>操作</th>
      </tr>
      </thead>
      <tbody>
      {% for book in book_list %}
          <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ book.title }}</td>
              <td>{{ book.price }}</td>
              <td>{{ book.pub_date|date:‘Y-m-d‘ }}</td>
              <td>{{ book.publish.name }}</td>
              <td>
                  {% for author in book.authors.all %}
                      {{ author.name }}
                      {% if not forloop.last %}
                          |
                      {% endif %}
                  {% endfor %}
              </td>
              <td>
                  <a href="{% url ‘bookdel‘ book.nid %}" class="btn btn-danger btn-sm">删除</a>
                  <button pkid="{{ book.nid }}" data_url="{% url ‘bookdel‘ book.pk%}" class="btn btn-danger btn-sm btn_dele">ajax删除</button>
                  <a href="{% url ‘bookedit‘ book.nid %}" class="btn btn-warning btn-sm">编辑</a>
              </td>
          </tr>
      {% endfor %}
  
      </tbody>
  </table>
  	通过button删除一个tr节点，即一条显示的记录
      <script>
          $(".btn_dele").click(function () {  //class属性btn_dele
              var pkid = $(this).attr("pkid"); //获取button的自定义属性pkid的值
              var ele = $(this).parent().parent()
              var book_url = $(this).attr("data_url")
  		    //$(this).parent():button的父节点td，td的父节点tr
              $.ajax({
                  url:book_url,
                  type: "post",
                  data: {
                      csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val()
                  },
                  success: function (response) {
                      const res = JSON.parse(response);
                      if (res.succ) {
                          ele.remove()
                      }
                  }
  
              })
  
          })
  
      </script>
  
  

• ajax 反向解析动态传参

  1. 执行ajax关联的标签添加自定义属性: 如data_url="{% url ‘bookdel‘ book.pk%}

  <button pkid="{{ book.nid }}" data_url="{% url ‘bookdel‘ book.pk%}" class="btn btn-danger btn-sm btn_dele">ajax删除</button>
  

  2. js中获取自定义属性值, ajax中url定义变量

     var book_url = $(this).attr("data_url")
     $.ajax({
         url:book_url,
         type:"post",
         ........
     })
     

• 标签自定义属性

  <h1 a="zidingyi"></h1>
  

• form表单input标签submit属性与表单里的button按钮触发post请求。如果不需要form表单发送post请求，ajax发送，将input标签type改为button

  <form action="{% url ‘login‘ %}" method="post">
      {% csrf_token %}
      <label for="user"></label>
      UserName: <input type="text" id="user" name="user">
      <label for="pwd"></label>
      Password: <input type="text" id="pwd" name="pwd">
      <input type="button" value="提交">  //type属性为button，form表单不会发送get或post请求
  </form>
  

• csrf_token验证：post

  1. 前端form表单中取隐藏标签属性值放入data中post到后端

     $.ajax({
     	data:{
     		csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val()
     		}
     	})
     

  2. ajaxSetup：django将csrftoken传送到前端，前端post时携带这个值

     $.ajaxSetup({data:csrfmiddlewaretoken=‘{{csrf_token}})
     

  3. 发送contenttype类型数据时,通过获取响应返回的cookie中的字符串， 放置在请求头中发送。需要引入一个jquery.cokkie.js插件

     {%load static%}
     <script src="{% static ‘js/jquery.cookie.js‘%}"></script>
     
     $.ajax{{
     	head:{"X-CSRKtoken":$.cookie("csrftoken")},
     }}