AJAX

示例

页面输入两个整数，通过AJAX传输到后端计算结果并返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_calc</title>
    <script src="/static/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>

<input type="text" id="i1"> +
<input type="text" id="i2"> =
<input type="text" id="i3">
<input type="button" value="ajax提交" id="b1">

<script>
  $("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })
</script>


</body>
</html>

HTML

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('ajax_add/', views.ajax_add),
    path('ajax_calc/', views.ajax_calc),

]

url

def ajax_calc(request):
    return render(request, "ajax_calc.html")


def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)

views

检测内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="/static/jquery-3.5.1.min.js"></script>
</head>
<body>

<form method="post">
{#<p>用户名：<input type="text" name="user" id="i1"> <span id="error" style="color: red"></span> </p>#}
用户名: <input type="text" name="user" id="i1"/><span id="error" style="color:red"></span>
<p>密码：<input type="password" name="pwd"> </p>
<p><input type="submit" value="注册"></p>
</form>

<script >
    $("#i1").blur(function () {
        $.ajax({
            url: "/check/",
            type: "post",
            data:{"user": $("#i1").val()},
            success: function (data) {
                console.log(data);
                $("#error").html(data.msg);
            }
        })
    })
</script>
</body>
</html>

HTML

    path('register/', views.register),
    path('check/', views.check),

url

from django.shortcuts import HttpResponse, render
from django.http import JsonResponse


def register(request):
    user = request.POST.get("user")
    print(user)
    return render(request, 'register.html')


def check(request):
    user = request.POST.get('user')
    print(user)
    if user == 'a':
        return JsonResponse({'status':1, 'msg':'用户名已存在'})
    else:
        return JsonResponse({'status':0, 'msg':'可用的用户名'})

views