爱站程序员基地jquery
## urls.py
from django.urls import re_pathfrom .views import *urlpatterns=[re_path(r\'^what\', what_views),]
## views.py
from django.http import HttpResponsedef what_views(request):return HttpResponse(\'jquery us ok\')
## (get).html
<button onclick=\"jqAjaxBtn()\">jequery-ajax</button><div id=\"show\"></div><script src=\"{% static \'js/jquery-3.4.1.js\' %}\"></script><script>function jqAjaxBtn(){{#$.get(url,data,callback,dataType)#}$.get(\'/what\',function (data) {$(\"#show\").html(data);});}</script>
## (post.注意post有csrf验证问题).html
{% csrf_token %}## 注意别忘记<button onclick=\"jqAjaxBtn()\">jequery-ajax</button><div id=\"show\"></div><script src=\"{% static \'js/jquery-3.4.1.js\' %}\"></script><script>function jqAjaxBtn(){var params = {## <input type=\"hidden\" name=\"csrfmiddlewaretoken\"## value=\"*****************\">## 标题$(\"[name=\'csrfmiddlewaretoken\']\").val() 取出csrfmiddlewaretoken的值\'csrfmiddlewaretoken\':$(\"[name=\'csrfmiddlewaretoken\']\").val()}$.post(\'/12-server/\',params,function(data){//data表示的是响应回来的数据$(\"#show\").html(data);});}</script>
json(复杂数据）
## views.py
from django.http import HttpResponseimport json## 注意别忘记def what_views(request):message={\'name\' :\'zhao\',\'age\': 50,}str=json.dumps(message)return HttpResponse(str)## HttpResponse(‘jquery is ok’，str)是错误写法
## .html
<button onclick=\"jsonAjaxBtn()\">json-ajax</button><div id=\"show\"></div><script src=\"{% static \'js/jquery-3.4.1.js\' %}\"></script><script>function jsonAjaxBtn() {$.get(\'/what\',function (data) {var html=\'\';html+=\"<h3>姓名\"+data.name+\"</h3>\";html+=\"<h3>年龄\"+data.age+\"</h3>\";$(\"#show\").html(html);},\'json\');}</script>
serializers（查询结果集【数据库查询】）
## views.py
from django.http import HttpResponsefrom django.core import serializersfrom .models import *def what_views(request):users = Users.objects.all()# 将uesrs转换成json字符串jsonStr =serializers.serialize(\'json\',users)return HttpResponse(jsonStr)
## .html
<button onclick=\"jqAjaxBtn()\">jequery-ajax</button><div id=\"show\"></div><script src=\"{% static \'js/jquery-3.4.1.js\' %}\"></script><script>function jqAjaxBtn(){$.get(\'/what/\',function (data) {$.each(data,function (i,obj) {console.log(\'id:\'+obj.pk);console.log(\'name:\'+obj.fields.name);});},\'json\');}</script>
