django中ajax的GET, POST请求

参考：https://blog.csdn.net/qq_43551801/article/details/120050009

Ajax能让我们轻松实现网页与服务器之间的数据交互。
本文主要介绍使用jQuery封装后的Ajax，可以使用$.ajax()直接发起GET和POST服务器请求。

一. 使用$.ajax()发起GET请求

1.例子1

        // 入口函数
        $(function () {
            // 直接调用$.ajax()发起GET请求
            $.ajax({
                type: 'GET',    // 指定请求方式（大小写均可）
                url: 'http://XXX', // URL地址
                data: {    // 此次请求所携带的参数(GET请求可省略)
                    id: 1
                },
                success: function (res) {   // 回调函数
                    console.log(res);
                }
            })
        })

$.ajax()中的type属性值为请求方式 ("POST" 或 "GET")， 默认为 "GET"。
注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

发起GET请求时，data参数可以省略（不是必选项）。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。

2.有时候GET请求也需要加上data参数

html

<form id="asset_form">
  <div class="col-lg-2" style="width:150px;padding-left: 0px">
    <label>
      <select name="change_line" class="form-control m-b" onchange="change_info()">
              <option value="all">所有平台</option>
              {% for i in orgs_list %}
                      <option value="{{i.id}}"> {{ i.name }} </option>
              {% endfor %}
      </select>
    </label>
  </div>
  </form>

js

function change_info(){
  $.ajax({
      type: "GET",
      url: "http://127.0.0.1:8000/web/change_platform_ajax/",
      data: $("#asset_form").serialize(),
      success: function (data) {
          $("#replace").html(data);
      }
  });
}

onchange事件就是标签内容发生变化时，会触发事件并调用相应的函数change_info()

views.py

def platform_search(request):
  key_line = request.GET.get('change_line', '')
  print(key_line)
  if key_line == "all":
    orgs_list=Org.objects.all()
  elif key_line != "all":
    orgs_list = Org.objects.filter(id=key_line)
  # orgs_list=Org.objects.all()
  return render(request, "web/show-buju-ajax.html", {"orgs_list": orgs_list})

urls.py

urlpatterns = [
    path('show/', web_show, name="web_show"),  
    path('mychart/<int:org_id>', mychart),
    path('change_platform_ajax/', platform_search)
]

逻辑如下

页面选择平台——》触发onchange调用change_info函数——》向change_platform_ajax发送GET请求——》根据url调用view中的platform_search函数

这里就是页面上选择不同平台时， 就会触发onchange事件，调用change_info函数，向http://127.0.0.1:8000/web/change_platform_ajax/发送GET请求，并加上发送的data数据为select标签中change_line的值，如下图

并把请求页面返回的内容替换当前页面中id=replace的标签。

request.GET获取的就是请求网站中后面的查询参数change_line=1

二. 使用$.ajax()发起POST请求

        // 入口函数
        $(function () {
            // 直接调用$.ajax()发起POST请求
            $.ajax({
                type: 'POST',    // 请求方式
                url: 'http://XXX',    // 请求的URL地址
                data: {    // 此次请求需要提交的数据（需按api接口格式给定）
                    bookname: '呐喊',
                    author: '鲁迅',
                    publisher: '长江文艺出版社'
                },
                success: function (res) {    // 回调函数
                    console.log(res);
                }
            })
        })

使用$.ajax()需要发起POST请求时，type属性值必须为POST（大小写均可），将此次请求需要提交的数据按api接口规定格式写入data属性值中，以对象键值对形式存储。