DDR爱好者之家

Django与JS交互的示例代码
站长资源 2024/11/26 佚名
76 1538
DDR爱好者之家 Design By 杰米

应用一：有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。
请注意：如果是不处理，直接显示在网页上，用Django模板就可以了。

这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

二，直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上（一次性地渲染，还是同一次请求）。

需要注意两点：1、views.py中返回的函数中的值要用 json.dumps()处理   2、在网页上要加一个 safe 过滤器

view.py

# -*- coding: utf-8 -*- 
 
from __future__ import unicode_literals 
 
import json 
from django.shortcuts import render 
 
def home(request): 
 List = ['自强学堂', '渲染Json到模板'] 
 Dict = {'site': '自强学堂', 'author': '涂伟忠'} 
 return render(request, 'home.html', { 
   'List': json.dumps(List), 
   'Dict': json.dumps(Dict) 
  })

home.html

<!DOCTYPE html> 
<html> 
<head> 
<title>欢迎光临 自强学堂！</title> 
<script src="/UploadFiles/2021-04-08/jquery.min.js">


应用二：不刷新网页的情况下，加载一些内容




view.py





#coding:utf-8 
from __future__ import unicode_literals 
from django.shortcuts import render 
from django.http import HttpResponse 
 
def get(request): 
 return render(request, 'oneapp/get.html') 
 
def add(request): 
 a = request.GET.get('a', 0) 
 b = request.GET.get('b', 0) 
 c = int(a) + int(b) 
 return HttpResponse(str(c)) 







urls.py





from django.conf.urls import url, include 
from django.contrib import admin 
from OneApp import views as oneapp_views 
 
urlpatterns = [ 
 url(r'^admin/', admin.site.urls), 
 #url(r'^$', oneapp_views.index), 
 url(r'^oneapp/index/', oneapp_views.index, name='index'), 
 url(r'^oneapp/home/', oneapp_views.home, name='home'), 
 url(r'^oneapp/get/', oneapp_views.get, name='get'), 
 url(r'^oneapp/add/', oneapp_views.add, name='add'), 
] 







get.html





<!DOCTYPE html> 
<html> 
<body> 
<p>请输入两个数字</p> 
<form action="/oneapp/add/" method="get"> 
 a: <input type="text" id="a" name="a"> <br> 
 b: <input type="text" id="b" name="b"> <br> 
 <p>result: <span id='result'></span></p> 
 <button type="button" id='sum'>提交</button> 
</form> 
 
<script src="/UploadFiles/2021-04-08/jquery.min.js">


由于用 jQuery 实现 ajax 比较简单，所以我们用 jQuery库来实现.。




用了jQuery.get() 方法，并用 $(selector).html() 方法将结果显示在页面上，如下图：


Django与JS交互的示例代码


应用三：传递数字或者字典到网页，由JS处理，再显示出来




首先定义接口和URL




views.py





#coding:utf-8 
from __future__ import unicode_literals 
from django.shortcuts import render 
from django.http import HttpResponse, JsonResponse 
import json 
 
 
# Create your views here. 
 
 
def ajax_list(request): 
 a = range(100) 
 #return HttpResponse(json.dump(a), content_type='application/json') 
 return JsonResponse(a, safe=False) 
 
def ajax_dict(request): 
 name_dict = {'a': 1, 'b': 2} 
 #return HttpResponse(json.dump(name_dict), content_type='application/json') 
 return JsonResponse(name_dict) 







urls.py





urlpatterns = [ 
 url(r'^admin/', admin.site.urls), 
 #url(r'^$', oneapp_views.index), 
 url(r'^oneapp/index/', oneapp_views.index, name='index'), 
 url(r'^oneapp/home/', oneapp_views.home, name='home'), 
 url(r'^oneapp/get/', oneapp_views.get, name='get'), 
 url(r'^oneapp/add/', oneapp_views.add, name='add'), 
 url(r'^oneapp/ajax_list/', oneapp_views.ajax_list, name='ajax_list'), 
 url(r'^oneapp/ajax_dict/', oneapp_views.ajax_dict, name='ajax_dict'), 
] 







然后就是在无刷新的情况下，把内容加载到页面了。




index.html





<!DOCTYPE html> 
<html> 
<body> 
<p>请输入两个数字</p> 
<form action="/add/" method="get"> 
 a: <input type="text" id="a" name="a"> <br> 
 b: <input type="text" id="b" name="b"> <br> 
 <p>result: <span id='result'></span></p> 
 <button type="button" id='sum'>提交</button> 
</form> 
 
 
<div id="dict">Ajax 加载字典</div> 
<p id="dict_result"></p> 
 
<div id="list">Ajax 加载列表</div> 
<p id="list_result"></p> 
 
 
<script src="/UploadFiles/2021-04-08/jquery.min.js">


注意：getJSON中的写的对应网址，用 urls.py 中的 name 来获取是一个更好的方法!标签：{% url 'name' %}




这样做最大的好处就是在修改 urls.py 中的网址后，不用改模板中对应的网址。


如果是一个复杂的字典或者列表，如：





person_info_dict = [ 
 {"name":"xiaoming", "age":20}, 
 {"name":"tuweizhong", "age":24}, 
 {"name":"xiaoli", "age":33}, 
] 





这样我们遍历列表的时候，每次遍历得到一个字典，再用字典的方法去处理，当然有更简单的遍历方法：




用 $.each() 方法代替 for 循环，html 代码（jquery)





$.getJSON('ajax_url_to_json', function(ret) { 
 $.each(ret, function(i,item){ 
  // i 为索引，item为遍历值 
 }); 
}); 





补充：如果 ret 是一个字典，$.each 的参数有所不同，详见：http://api.jquery.com/jquery.each/





$.getJSON('ajax-get-a-dict', function(ret) { 
 $.each(ret, function(key, value){ 
  // key 为字典的 key，value 为对应的值 
 }); 
}); 





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米