Ajax
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章