jquery ajax

Posted 2020-11-19 mingxiazhichan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于jquery ajax的主要内容，如果未能解决你的问题，请参考以下文章

jQuery高级Ajax

十条jQuery代码片段助力Web开发效率提升

使用 JQuery ajax 在 DOM 操作后附加事件

使用 Jquery 的同步“Ajax”调用似乎不起作用

前端面试题之手写promise