Ajax简介、基础操作

Ajax简介

Ajax 即“A synchronous J avascript And X ML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

向服务器发送请求的方式

1、浏览器地址栏，默认get 请求

2、form表单：

　　get请求

　　post请求

3、a标签，默认get请求

4、Ajax

　　get请求

　　post请求

　特点：

　　　1、异步请求

　　　2、局部刷新

Ajax简单应用

1、首先先创建一个简单的django项目

urls.py

from django.contrib import admin
from django.urls import path
from  app01 import views
urlpatterns = [
    path(‘admin/‘,admin.site.urls),path(‘index/‘,views.index),path(‘test_ajax/‘,views.ajax)
]

views.py

from django.shortcuts import render,HttpResponse
def index(request):
    return render(request,‘index.html‘)

# Create your views here.
def ajax(request):
    return HttpResponse(‘ok‘)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1>index</h1>
<button class="Ajax">Ajax</button>
<p class="content"></p>
<script>
    $(‘.Ajax‘).click(function () {
        alert(‘123‘)#
        //发送Ajax请求
        $.ajax({
            url:‘/test_ajax/‘,//请求url
            type:‘get‘,//请求方式 post
            //data:{},#请求数据
            success:function (data) {//回调函数，某个动作执行完之后执行的函数
                console.log(data);
                $(‘.content‘).html(data)

            }
        })

    })
</script>
</body>
</html>

2、以上代码实现效果

当我们访问 index的时候

等我们在点击Ajax按钮的时候

这里到底发生了什么

访问流程

1、首先咱们访问index，是一次get请求。

2、当我们点击Ajax按钮的时候，这里触发了模板里写好的函数，Ajax去请求url

    $(‘.Ajax‘).click(function () {
        alert(‘123‘)
        //发送Ajax请求
        $.ajax({
            url:‘/test_ajax/‘,//请求url
            type:‘get‘,//请求方式 post

3、请求url得到在试图函数中写好的逻辑，返回了‘ok’值，这里data接收了这个值

进行前端日志打印，和给 ‘content’添加html的值。

success:function (data) {//回调函数，某个动作执行完之后执行的函数
                console.log(data);
                $(‘.content‘).html(data)

4、此次请求没有刷新页面，url没有改变，只是进行了局部的刷新，对p标签进行赋值。

Ajax简介、基础操作

Ajax简介

向服务器发送请求的方式

Ajax简单应用

访问流程

相关推荐