AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
js实现两个数的和:
///模板方面/////
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
{% csrf_token %}
<p>输入<input type="text" id="t1"></p>
<p>输入<input type="text" id="t2"></p>
<p><button class="btn">计算和</button><span class="sum"></span></p>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
???$(‘.btn‘).click(function () {
???????$.ajax({
???????????url:‘/sum2/‘,
???????????type:"POST",
???????????data:({
???????????????csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),
???????????????t1:$(‘#t1‘).val(),
???????????????t2:$(‘#t2‘).val()
???????????}),
???????????success:function (sum) {
???????????????var sum=JSON.parse(sum);
???????????????$(‘.sum‘).html(sum)
???????????}
???????})
???})
</script>
</html>
///视图方面/////
def sum(request):
???# t1=request.GET.get(‘t1‘)
???# t2=request.GET.get(‘t2‘)
???# print(t1)
???return render(request,‘sum.html‘)
def sum2(request):
???t1=request.GET.get(‘t1‘)
???t2=request.GET.get(‘t2‘)
???return HttpResponse(json.dumps(int(t1)+int(t2)))
用Ajax实现表的删除操作：
///////模板方面/////////
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
<h3>实现计算器的功能</h3>
<div class="bs-example" data-example-id="contextual-table">
???<table class="table">
?????<thead>
???????<tr>
?????????<th>序号</th>
?????????<th>用户名</th>
?????????<th>密码</th>
???????</tr>
?????</thead>
?????<tbody>
?????{% for user in user_list %}
?????<tr class="active">
???????????????<td class="id">{{ user.id }}</td>
???????????????<td>{{ user.username }}</td>
???????????????<td>{{ user.password }}</td>
?????????
?????????<td><button>删除</button></td>
???????</tr>
{% endfor %}
?????</tbody>
???</table>
?</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
???$(‘button‘).click(function () {
???????$.ajax({
???????????url:‘/list_ajax/‘,
???????????type:‘get‘,
???????????data:({
???????????????id:$(this).parent().parent().children().first().text()
???????????}),
???????????success:function (id) {
???????????????var id=JSON.parse(id);
???????????????console.log($(this));
???????????????$(‘.id‘).each(function () {
???????????????????if($(this).html()==id){
???????????????????????$(this).parent().remove()
???????????????????}
???????????????})
{# ???????????????$(this).parent().parent().remove()#}
???????????}
???????})
???})
</script>
</html>
///////视图方面/////////
def list(request):
???user_list=models.UserInfo.objects.all()
???return render(request,‘list.html‘,{‘user_list‘:user_list})
def list_ajax(request):
???id=request.GET.get(‘id‘)
???models.UserInfo.objects.filter(id=id).delete()
???return HttpResponse(json.dumps(id))
Ajax
原文地址：http://www.cnblogs.com/qq666666/p/7851116.html