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
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
随机推荐
- python基础(二)----数据类型
Python基础第二章 二进制 字符编码 基本数据类型-数字 基本数据类型-字符串 基本数据类型-列表 基本数据类型-元组 可变.不可变数据类型和hash 基本数据类型-字典 基本数据类型-集合 二进 ...
- IOS开发 Missing submodule 'XXXX' 警告
项目结构 如下图 target -> ssssssss 是个Framework&library 出现的警告 Missing submodule 'XXXXXX' 只要在 ssssssss ...
- crm 02--->讲师页面及逻辑
要求: 讲师 批量初始化 考勤 录入成绩 批量初始化 考勤与批量初始化这两个功能都要放在课程记录表中CourseRecord # 批量初始化 # 将该班的所有学生,初始化带某一天,而不是将每个学生一个 ...
- “App Store加载失败，使已购页面再试一次”解决方案
问题描述: 用A账户登陆App Store,下载了Xcode.还没有下载完就需要更换账户 更换账户 找到App Store界面上部的商店,选择注销,然后再登陆. 账户更换完毕,讲道理来说应该是可以下载 ...
- mysql安装优化
安装centos7 安装mysql解决方案1 安装mariadb解决方案2 官网下载安装mysql-server时区批量配置编码远程连接my.cnf简版的参数说明核心配置参数升级版mysql存储引擎M ...
- POJ3686 The Windy's 【费用流】*
POJ3686 The Windy’s Description The Windy’s is a world famous toy factory that owns M top-class work ...
- Hbase rowkey热点问题
当处理由连续事件得到的数据时,即时间上连续的数据.这些数据可能来自于某个传感器网络.证券交易或者一个监控系统.它们显著的特点就是rowkey中含有事件发生时间.带来的一个问题便是HBase对于row的 ...
- c++中using的使用
#include <iostream> #include <vector> #include <map> using namespace std; //1.相当于t ...
- 笔记：NPM 无限需要依赖问题解决
笔记:NPM 无限需要依赖问题解决 起因 因为想学一下 VUE,开始跟着教程一步一步输出命令,开始也没有什么问题,一切都很顺利. 突然不知道是哪一步出了问题,一直让我安装依赖,没完没了,开始并不觉得有 ...
- TCP/IP概念简述
这里所说的是广义上的TCP/IP协议群,而不是特指TCP和IP这两种具体的协议.既然是协议群,那么都有哪些协议呢?我们先不着急回答这个问题,因为要弄清楚这个问题,首先得了解另两件事,就是为啥要有这个协 ...