ajax请求

Posted relaxlee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax请求相关的知识,希望对你有一定的参考价值。

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>
    
    1. 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")},
      }}
      

以上是关于ajax请求的主要内容,如果未能解决你的问题,请参考以下文章

Spring MVC 3.2 Thymeleaf Ajax 片段

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

ajax与 axios的基础讲解(附代码及接口)

Thymeleaf - 如何交互和重新加载 Javascript?

使用 JQuery ajax 在 DOM 操作后附加事件