Django使用JQuery实现Ajax请求

小末快跑

发布于 2019-07-03 17:51:30

3.4K0

发布于 2019-07-03 17:51:30

文章被收录于专栏：日常撸知识日常撸知识

一、什么是Ajax

AJAX ：Asynchronous JavaScript and XML。

一般情况下网页部分内容如果需要更新，必需重载整个网页面。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。也就是在不重新加载整个页面的情况下，浏览器可以与服务器交换数据并更新部分网页内容，大大提升用户的体验。例如在百度输入框中输入一个关键字，会通过ajax请求数据返回内容；新浪微博的点赞等都用到了Ajax技术。

Ajax通常用于要连接数据库的地方，但是连接数据库传输的信息量又很少，用不着刷新整个页面，这种类型的适合用ajax，避免了刷新整个页面带来的资源浪费。

Ajax工作原理：

传统的web服务从数据库获取数据是没有Ajax引擎的，不能实现异步请求和局部刷新。

二、Django中用JQuery实现Ajax异步请求

JQuery是Javascript的一个封装库，JQuery极大地简化了 JavaScript 编程。

一，在html页面中引入js文件：

<script src="{% static '/js/jquery_2.1.1_jquery.min.js' %}"></script>

二，在html页面中编写需要局部刷新的html文本和通过jquery实现的ajax代码，这一步非常关键：

<div>

<input type="text" id="title">
<p class="text"></p>
<input type="button" value="AJAX提交" id="b2">

<script>
  $(document).ready(function(){
  $("#b2").on("click", function () {
    $.ajax({
      url:"/ajax_text/",<!--为什么这个url只能使用原生url里的链接-->
      type:"GET",
      data:{
     "blogtitle":$("#title").val(),
     },  
      success:function (data) {
        $(".text").html(data);
      }
    })
  })
  })
</script>

</div>

在文本框中输入要查询的关键字，当点击AJAX提交按钮的时候，会执行ajax请求，访问url

url:"/ajax_text/"

并将输入的关键字传给blogtitle，到后台访问数据库；当ajax引擎拿到返回的数据后，会将得到的文本数据赋值给p标签，p标签就会显示从数据库获得文本数据。整个过程只是局部数据刷新，整个网页并没有刷新。

三，在url.py里编写访问路由路径

path('ajax_text/',views.blogtitle),

四，在views.py里编写从数据库获取数据的视图函数

def blogtitle(request):
    bloggtitle = request.GET.get("blogtitle")
    blogsearch = StudyNote.objects.filter(Q(title__icontains=bloggtitle)).all().order_by('-id')
    if blogsearch:
        blog = blogsearch

        return HttpResponse(blog)
    else:
        return HttpResponse('<strong>Attention! No search result!</strong>')

通过GET方法得到前台传来的blogtitle，在通过blogtitle从数据库查询含有blogtitle的文章，查到之后返回数据给前台。如果没有查到，则返回文本<strong>Attention! No search result!</strong>给前台。

五、效果如图：