别说那么多,就主要分为3个文件需要修改使用:views.py,index.html,urls.py
Ajax本质就是js,直接上代码。
<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 type="text/javascript">
$(document).ready(function(){
$("#sum").click(function(){
var a = $("#a").val();
var b = $("#b").val();
$.ajax({
type: "GET",
contentType: "application/json",
url: "{% url 'show_view:add' %}",
data: {
"a":a,
"b":b
},
dataType: 'html',
success: function (result)
{
$('#result').html(result)
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert('访问网络失败!' + errorThrown);
}
})
});
});
</script>
一开始我也是看不懂这些代码的,但是只用记住某些方法的使用就可以了,
$("#sum").click(function(){}我"sum"id的去点击后会触发的事情。
后面就是调值之类的说法了。
$.ajax({})中,注意url和data,就是data为我传去url的值。而url则是你自己设定的。
这个设定就在你的urls.py文件中!!!这是第二个文件,需要注意,网上教程好多人都没讲喔~以致都找不到函数
#ajax
path('add', views.add, name='add'),
这就意味着,这个请求会带到views.add到这个方法里面去。
最后具体请求和返回值则到view.py中去:
def add(request):
try:
a = request.GET['a']
b = request.GET['b']
a = int(a)
b = int(b)
return HttpResponse(json.dumps(a+b), content_type="application/json")
except Exception as e:
return HttpResponse(e.args)
这就是对应到得到的键值a,b.
最后返回一个HttpResponse,里面带上你的值,且要先转为json数据为好。
POST方法的话:
先加上
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
#POST里面不要头就是了
$.ajax({
type: "POST",
url: "{% url 'show_view:add' %}",
data: {
"x":a,
"y":b
},
dataType: 'html',
success: function (result)
{
$('#result').html(result)
},
传递字典列表类型
如果是从前端ajax传到后端去,在传递字典或列表时,需要转化为JSON数据.
data:{data:JSON.stringify(data_list)},否则后台接受数据时没办法接受正常的数据。
AJax:
$("#sum").click(function(){
var x={
"a": $("#a").val(),
"b": $("#b").val(),}
var data = JSON.stringify(x);//请求头
$.ajax({
type: "POST",
url: "{% url 'show_view:add' %}",
dataType: "json",
data: {
data:data,
},
success: function (result)
{
$('#result').html(result)
},
})
django:
a = request.POST.get("data",0)
json_dict = json.loads(a)
a=int (json_dict['a'] )
b=int (json_dict['b'] )
return HttpResponse(json.dumps(a+b), content_type="application/json")
后端传到前端的话,有一个坑,就是你的请求Ajax的datatype不能是html.
后端取值就正常的result.KEY就可以了
// 字典 dict
$('#dict').click(function(){
$.ajax({
type: "POST",
url: "{% url 'show_view:add_dict' %}",
dataType: "json",
data: {},
success: function (result)
{
$('#dict_result').append(result.Name+'<br>');
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert('访问网络失败!' + errorThrown);
}
})
});