初识ajax请求

23传送门：Ajax - Web 开发者指南 | MDN

简介

Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的 AJAX 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管 X 在 Ajax 中代表 XML，但由于JSON的许多优势，比如更加轻量以及作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 Ajax 模型中打包信息

浏览器向网站发送请求时，URL和表单形式进行提交：

    data_dict = {}
    search_data = request.GET.get('q', "")
    # 根据关键字进行搜索，如果关键字存在，就进行搜索,返回搜索出的queryset
    if search_data:
        data_dict["mobile__contains"] = search_data
    queryset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")

• GET
• POST

特点：页面刷新

除此外可以通过ajax向后台发送请求（偷偷发送），不会进行刷新。

1. 以来jQuery
2. 编写ajax代码

详细的函数使用：https://www.cnblogs.com/huyueping/p/5132903.html

$.ajax({
    url：“发送的地址”，
    type：post，
    data:{
            n1:123,
            n2:456,
        }
        success:function(res)
            {
            console.log(res)
            }
})

url：请求的服务器地址，默认是当前页面，数据类型是String

type：请求的方式，有POST和GET两种，默认是GET，数据类型是String

data：发送到服务器的数据，数据类型是Object或者String，大括号里的对象必须为key/value格式，比如：data:{boy:"LiLei",girl:"HanMeimei",boyage:18,girlage:16}

dataType：预期服务器返回的数据类型，数据类型是String，

success：请求成功后调用的回调函数。这里必须是Function类型的参数，它有两个参数：
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

点击提交：

发送GET请求：

{% block js %}
  <script type="text/javascript">
  function cf()
  {
    $.ajax({
      url:"/task/ajax/",
      type:"get",
      data:{
            n1:123,
            n2:456,
            },
          success:function(res)
          {
            console.log(res);
          }
    })
  }
  </script>
{% endblock %}

def task_ajax(requset):
    return HttpResponse("成功了<(*￣▽￣*)/")

 向/task/ajax/请求，n1,n2是发送到服务器的数据，然后请求成功后调用的回调函数successs.

 发送POST请求：

免除csrf_token认证

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def task_ajax(requset):
    print(requset.POST)
    return HttpResponse("成功了<(*￣▽￣*)/")

提交到用户后台的数据，POST

 jQuery绑定事件

用jQuery绑定事件：设置id

<input id="btn1" type="button" class="btn btn-primary" value="点击" />

  <script type="text/javascript">
  $(function ()
  {
      //页面加载完成之后直接执行代码
      btnBind();
  })
  
  function btnBind()
  {
      $("#btn1").click(function (){
      $.ajax
      ({
      url:"/task/ajax/",
      type:"post",
      data:{n1:123,n2:456,},
           success:function(res){console.log(res);}
      })
    })
  }
  </script>

Ajax请求的返回值：JSON格式。