Django学习---ajax
Ajax
应用场景：我们在输入表单进行提交的时候往往会判断输入的数据形式是否正确，这个时候如果我们点击了提交就会刷新页面。如果我们不想要它刷新页面，让它“悄悄的提交数据”，这个时候我们就需要使用ajax。
ajax格式：
$.ajax({
url:'/host',
type:"POST",
data:{'k1':'v1','k2':'v2'},
success:function(data):{
if(data == 'lkdfa'){
location.reload();#刷新页面
}else{
alert(data);
}
}
})
上面的data是服务器端返回的字符串
一般我们服务器端会把数据以字典转换成字符串的形式传给前端，如：在python中用json.dumps把字典转换成字符串
ret = {'status':True,'data':None,'error':None}
try:
hostname = request.POST.get('hostname')
ip = request.POST.get('ip')
port = request.POST.get('port')
b_id = request.POST.get('b_id')
print(request.method, hostname, ip,port,b_id,sep='\t')
if hostname and len(hostname) > 3:
models.Host.objects.create(
hostname=hostname,
ip=ip,
port=port,
b_id=b_id,
)
else:
ret['status'] = False
ret['error'] = "your hostname is too short"
except Exception as e:
ret['status'] = False
ret['error'] = "请求错误"
return HttpResponse(json.dumps(ret))
我们在前端就需要用到JSON.parse(data)把字符串转换成字典（在把字典转换成字符串要用JSON.stringify()）
当然还可以用一个简单的方法获得表单中所有的数据：
data: $('#opt_form').serialize(),#opt_form是表单的id选择器的名称
如果我们嫌处理data麻烦，每次都要用json.parse()转换数据的话，可以用下面的：
$.ajax({
url : '/ajax_add_app',
data:{'user':123,'pwd':456},
type:'POST',
traditional:true,
dataType:'JSON',
success:function(obj){
},
error:function(){},
})
那下面function里面的参数就不是一个字符串，而是一个对象
error:我们发了一个未知的错误，后台没有捕捉到，才会执行
traditional：默认是false，如果表单得到的数据是一个列表，默认是后台是接收不到的，如果设置成了true，后台用getlist()就可以了
实例：对表格数据的增删改查：
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shade{
position: fixed;
top:0;
left:0;
right:0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.add_model{
position: fixed;
height:300px;
width:400px;
top:50%;
left:50%;
z-index: 10;
border: 1px solid red;
background-color: white;
margin-top: -150px;
margin-left:-200px;
}
.ajax_submit{
display: inline-block;
padding:5px;
background-color: blue;
color:white;
}
</style>
</head>
<body>
<h1>主机列表</h1>
<div>
<input id="add_host" type="button" value="添加" />
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>ip</th>
<th>端口</th>
<th>业务线名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for row in v1 %}
<tr nid="{{ row.nid }}" bid="{{ row.b_id }}">
<td>{{ forloop.counter }}</td>
<td id="h">{{ row.hostname }}</td>
<td id="i">{{ row.ip }}</td>
<td id="p">{{ row.port }}</td>
<td>{{ row.b.caption }}</td>
<td><a class="edit">修改</a>丨<a class="del">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="hide shade"></div>
<div class="hide add_model">
<form id="opt_form" action="/host/" method="post">
<div class="group" style="display: none;">
<p>用户id：<input id="nid" type="text" name="nid" /></p>
</div>
<div class="group">
<p>主机名：<input id="hostname" type="text" name="hostname" /></p>
</div>
<div class="group">
<p>IP：<input id="ip" type="text" name="ip" /></p>
</div>
<div class="group">
<p>端口：<input id="port" type="text" name="port" /></p>
</div>
<div class="group">
<p>
业务线：
<select id="se1" name="b_id">
{% for row in b_list %}
<option value="{{ row.id }}">{{ row.caption }}</option>
{% endfor %}
</select>
</p>
</div>
<a id="ajax_submit" class="ajax_submit">ajax提交</a>
<input id="cancel" type="button" value="取消" />
<span id="error_msg" style="color:red"></span>
</form> </div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#add_host').click(function(){
$('.shade,.add_model').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add_model').addClass('hide');
});
$('#ajax_submit').click(function(){
$.ajax({
url : '/test_ajax/',
type:'POST',
data: $('#opt_form').serialize(),
success:function (data) {
var obj = JSON.parse(data)
if(obj.status){
location.reload()
}else{
$('#error_msg').text(obj.error);
}
}
})
});
$('.edit').click(function(){
$('.shade,.add_model').removeClass('hide'); var hostname = $(this).parent().parent().find('#h').text()
var ip = $(this).parent().parent().find('#i').text()
var port = $(this).parent().parent().find('#p').text()
var nid = $(this).parent().parent().attr('nid')
var bid = $(this).parent().parent().attr('bid'); $('#nid').val(nid);
$('#hostname').val(hostname);
$('#ip').val(ip);
$('#port').val(port);
$('#se1').val(bid); });
$('.del').click(function(){
var nid = $(this).parent().parent().attr('nid')
var hostname = $(this).parent().parent().find('#h').text() var result = confirm("确定要删除主机名为"+hostname+"的记录吗？") if(result){ $.ajax({
url : '/delete/',
type : 'POST',
data : {'nid':nid},
success:function(data){
alert(data)
}
});
$(this).parent().parent().addClass('content')
$(this).parent().parent().parent().find('.content').html("<span style='color:red;align-text:left'>已经删除</span>")
}
});
});
</script>
</body>
</html>
host
url.py:
from django.contrib import admin
from django.urls import path
from django.conf.urls import url,include
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^business/$',views.business),
url(r'^host/$',views.host),
url(r'^test_ajax/$',views.test_ajax),
url(r'^delete/$',views.delete), ]
view.py:
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json
# Create your views here.
def business(request):
v = models.Business.objects.all() return render(request,'business.html',{'v':v}) def host(request):
if request.method=='GET': v1 = models.Host.objects.filter(nid__gt=0)
b_list = models.Business.objects.all()
return render(request, 'host.html', {'v1': v1,'b_list':b_list})
elif request.method=='POST':
hostname = request.POST.get('hostname')
ip = request.POST.get('ip')
port = request.POST.get('port')
b_id = request.POST.get('b_id')
models.Host.objects.create(
hostname=hostname,
ip=ip,
port=port,
b_id=b_id,
)
return redirect('/host') def test_ajax(request):
ret = {'status':True,'data':None,'error':None}
try:
nid = request.POST.get('nid')
hostname = request.POST.get('hostname')
ip = request.POST.get('ip')
port = request.POST.get('port')
b_id = request.POST.get('b_id')
print(request.method, nid ,hostname, ip,port,b_id,sep='\t')
if hostname and len(hostname) > 3:
if nid :
models.Host.objects.filter(nid=nid).update(
hostname=hostname,
ip=ip,
port=port,
b_id=b_id,
)
else:
models.Host.objects.create(
hostname=hostname,
ip=ip,
port=port,
b_id=b_id,
)
else:
ret['status'] = False
ret['error'] = "your hostname is too short"
except Exception as e:
ret['status'] = False
ret['error'] = "请求错误"
return HttpResponse(json.dumps(ret))
def delete(request):
nid = request.POST.get('nid')
print(nid)
result = models.Host.objects.filter(nid = nid).delete()
if result:
return HttpResponse('ok')
else:
return HttpResponse('fail to delete data')
model.py:
from django.db import models # Create your models here.
class Business(models.Model):
caption = models.CharField(max_length=32)
code = models.CharField(max_length=32,null=True,default='SA') class Host(models.Model):
nid = models.AutoField(primary_key=True)
hostname = models.CharField(max_length=32,db_index=True)
ip = models.GenericIPAddressField(protocol='ipv4',db_index=True)
port = models.IntegerField()
b = models.ForeignKey(to='Business',to_field='id',on_delete=models.CASCADE)
Django学习---ajax的更多相关文章
- [Django学习]Ajax访问静态页面
Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- Django学习笔记（8）——前后台数据交互实战（AJAX）
这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- Django学习——图书管理系统图书修改、orm常用和非常用字段（了解）、 orm字段参数（了解）、字段关系（了解）、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)
1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...
- django 接受 ajax 传来的数组对象
django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django学习笔记（13）——Django的用户认证（Auth）组件，视图层和QuerySet API
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
随机推荐
- OPEN(SAP) UI5 学习入门系列之三：MVC （下） - 视图与控制器
继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...
- Xcode5.1.1支持低版本和image not found和Couldn't register XXXX with the bootstrap server. Error: unknown error code.
一:问题 targets中证书的设置 1.项目支持多设备(Xcode5.1.1支持低版本) 2.真机测试要确保Code Siging 设置没问题 支持的最低版本 二 :问题:image not f ...
- OK335xS 系统启动配置解析
OK335xS 系统启动配置解析 一.参考文档: AM335x ARM® Cortex™-A8 Microprocessors (MPUs) Technical Reference Manual 二. ...
- 全球常用NTP服务器地址及IP列表ntpdate
pool.ntp.org是一组授时服务器虚拟集群,在全球有3000多台服务器,只需要这样写就行了,具体哪台服务器提供服务无需关心. time.windows.com 微软 asia.pool.nt ...
- Python：版本升级(Mac OS X)
Mac OS X 10.8及以后的版本都预装了Python 2.7,但是在Mac上(Unix-like OS)上修改Python的版本并不如Windows方便.这篇文章的目标是要将Mac自带的Pyth ...
- 基于 task 为 VSCode 添加自定义的外部命令
我们有很多全局的工具能在各处使用命令行调用,针对某个仓库特定的命令可以放到仓库中.不过,如果能够直接为顺手的文本编辑器添加自定义的外部命令,那么执行命令只需要简单的快捷键即可,不需要再手工敲了. ...
- hadoop 的job.setOutputKeyClass和job.setOutputValueClass的几个问题
昨天写了一个mapreduce函数一直有错误,找不到错误,今天找了一天终于解决了,原来是hadoop 的job.setOutputKeyClass和job.setOutputValueClas设置输出 ...
- 重温CLR（十三） 定制特性
利用定制特性,可宣告式为自己的代码构造添加注解来实现特殊功能.定制特性允许为几乎每一个元数据表记录项定义和应用信息.这种可扩展的元数据信息能在运行时查询,从而动态改变代码的执行方式.使用各种.NET技 ...
- GridView合并表头多重表头
后台代码: using System; using System.Data; using System.Configuration; using System.Web; using System.We ...
- POJ3045 Cow Acrobats
题意 Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away and join t ...