zoukankan      html  css  js  c++  java
  • jquery ajax

    1. 导入jquery文件。

    STATICFILES_DIRS=(
        os.path.join(BASE_DIR,'static'),
    )

    2.创建url:

    1     urlpatterns = [
    2     path('admin/', admin.site.urls),
    3     path(r'search/',views.search),
    4 ]
    View Code

    3.创建视图:

    def search(req):
        if req.method=='POST':
            username=req.POST.get("username") or ''
            dic={"flag":False}
            if username=='zhoujielun':
                # dic['flag']=True
                # dic['flag']=Testdb.objects.values_list("ip")
                va=Testdb.objects.values("ip")
                result=[]
                for i in va:
                    result.append(i['ip'])
                dic['flag']='
    '.join(result)
            return HttpResponse(json.dumps(dic))
        else:
            return render(req,'search.html')
    View Code

    4.创建模板文件:

     1 {%  load staticfiles %}
     2 <!DOCTYPE html>
     3 <html lang="en">
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>search</title>
     7     <script src="{%  static 'jquery-3.2.1.js' %}"></script>
     8 </head>
     9 <body>
    10 <input type="text" class="search-label-icon" id="search"/>
    11 <form>
    12     {% csrf_token %}
    13     <input type="submit" class="btn-danger">
    14 </form>
    15 <div><span id="va"></span></div>
    16 <script>
    17     $("#search").keyup(function () {
    18         $.ajax({
    19             url:'/search/',
    20             type:"POST",
    21             data:{
    22                 "username":$(this).val(),
    23                 "csrfmiddlewaretoken":"{{ csrf_token }}",
    24             },
    25             success:function (a) {
    26                 var newstr=JSON.parse(a);
    27                 if (newstr["flag"]) {
    28                     $span=$("<span>");
    29                     $span.text(newstr["flag"])
    30                     $("#search").after($span)
    31                 }
    32             }
    33         })
    34         }
    35     )
    36 </script>
    37 </body>
    38 </html>
    View Code
  • 相关阅读:
    three.js 制作一个三维的推箱子游戏
    three.js 郭先生制作太阳系
    three.js 制作魔方
    three.js 欧拉角和四元数
    mysql
    重装系统后需要安装的软件
    python3.7 安装PyQt5
    Java读取文件
    linux 环境jdk安装
    linux 修改用户字符集
  • 原文地址:https://www.cnblogs.com/mingxiazhichan/p/9206707.html
Copyright © 2011-2022 走看看