1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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
>
<
script
src
=
"http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"
></
script
>
<
script
>
$(document).ready(function(){
$("#sum").click(function(){
var a = $("#a").val();
var b = $("#b").val();
$.get("/add/",{'a':a,'b':b}, function(ret){
$('#result').html(ret)
})
});
});
</
script
>
</
body
>
</
html
>
|
在原来的基础上,在一些元素上加了 id, 以便于获取值和绑定数据,然后我们用了jQuery.get() 方法,并用 $(selector).html() 方法将结果显示在页面上,如下图:
备注:关于请求头和 request.is_ajax() 方法使用
views.py 中可以用 request.is_ajax() 方法判断是否是 ajax 请求,需要添加一个 HTTP 请求头:
原生javascript:
1
|
xmlhttp.setRequestHeader(
"X-Requested-With"
,
"XMLHttpRequest"
);
|
用 jQuery:
1
|
用 $.ajax 方法代替 $.get,因为 $.get 在 IE 中不会发送 ajax header
|
服务器端会将请求头的值全部大写,中划线改成下划线,并在非标准的头前面加上 HTTP_,这个过程可以认为相当于以下Python代码:
1
2
3
4
5
6
7
8
9
|
STANDARD_HEADERS
=
[
'REFER'
,
'HOST'
, ...]
# just for example
def
handle_header(value):
value
=
value.replace(
'-'
,
'_'
).upper()
if
value
in
STANDARD_HEADERS:
return
value
return
'HTTP_'
+
value
views.py
Django 1.7 及以后的版本有更简单的方法(使用 JsonResponse(官方文档)):
在 django 1.6 及以前的旧版本中可以自己写一个 JsonResponse 方法,如下:
写好后,我们在 urls.py 中添加以下两行:
打开开发服务器 python manage.py runserver 我们访问对应的网址会看到输出值: 下一步就是在无刷新的情况下把内容加载到网页了,我们修改一下首页的模板 index.html
技能提升:getJSON中的写的对应网址,用 urls.py 中的 name 来获取是一个更好的方法! 标签:{% url 'name' %}
这样做最大的好处就是在修改 urls.py 中的网址后,不用改模板中对应的网址。
补充:如果是一个复杂的 列表 或 字典,因为比如如下信息:
这样我们遍历列表的时候,每次遍历得到一个字典,再用字典的方法去处理,当然有更简单的遍历方法: 用 $.each() 方法代替 for 循环,html 代码(jQuery)
补充:如果 ret 是一个字典,$.each 的参数有所不同,详见:http://api.jquery.com/jquery.each/
|