django建立管理系统之五----单页ajax数据交互
ajax数据提交:
需求:
1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新
a.可以用刷新页面来实现数据页面的更新
对应的html,实现局部刷新(可以用刷新页面实现,例如
$(
function
(){
refresh();
});
//点击按钮调用的方法
function
refresh(){
window.location.reload();
//刷新当前页面.
}
)
b.也可以使用js网页拼凑方法来实现页面局部刷新
model页面如下:
model html:
<div class="model hide">
<form method="post" action="/classes.html" >
<input name="id" type="text" class="hide" />
<input name="caption" type="text" placeholder="确定" />
<input id="id_modal_cancel" type="button" value="取消"/>
<input type="submit" value="Submit"/>
<input type="button" id="modal_ajax_submit" value="Ajax方式提交"/>
</form>
</div>
table:
table html:
{% for item in cls_list %}
<tr>
<td alex="id">{{ item.id }}</td>
<td alex="caption">{{ item.caption }}</td>
<td><a class="td-edit">编辑</a>| <a target="_blank" href="/edit_classes.html?nid={{ item.id }}">跳转编辑</a> | <a class="td-delete">删除</a></td>
</tr>
{% endfor %}
-------------------
js开始拼凑:
要拼凑的格式: /*
<tr>
<td>{{ item.id }}</td>
<td>{{ item.caption }}</td>
<td>
<a class="td-edit">编辑</a> | <a class="td-delete">删除</a>
</td>
</tr>
*/
开始拼凑:
function bindSubmitModal() {
$('#modal_ajax_submit').click(function () {
var nid = $('.modal input[name="id"]').val();
var value = $('.modal input[name="caption"]').val();
$.ajax({
url: SUBMIT_URL,
type: 'POST',
data: {caption: value,id: nid},
dataType: "JSON",
success: function (rep) {
//data = JSON.parse(data);
if(!rep.status){
alert(rep.error);
}else{
// location.reload();
// 通过js在table表格最后追加一行数据,追加的数据就是当前增加的数据
/*
<tr>
<td>{{ item.id }}</td>
<td>{{ item.caption }}</td>
<td>
<a class="td-edit">编辑</a> | <a class="td-delete">删除</a>
</td>
</tr>
*/
var tr = document.createElement('tr');
var td1 = document.createElement('td');
// td1ID
td1.innerHTML = rep.data.id;
var td2 = document.createElement('td');
// td2标题
td2.innerHTML = rep.data.caption;
var td3 = document.createElement('td');
td3.innerText = "|";
var a1 = document.createElement('a');
a1.innerHTML = "编辑";
a1.className = "td-edit"
var a2 = document.createElement('a');
a2.className = "td-delete";
a2.innerHTML = "删除";
$(td3).prepend(a1);
$(td3).append(a2);
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
$('table tbody').append(tr);
$('.modal,.shade').addClass('hide');
}
}
}) })
}
--------------------------------事件委托------------------------
-----新创建的元素没有绑定js,因为js早已经载入完毕,这是可以通过事件委托给他绑定:
function bindTdEditEvent() {
/*
$('td .td-delete').click(function () {
$('.remove,.shade').removeClass('hide');
})
*/
$('tbody').on('click', '.td-edit', function () {
$('.model,.shadow').removeClass('hide');
SUBMIT_URL = "/up_classes.html";
/*
var tds = $(this).parent().prevAll();
$('.modal input[name="caption"]').val(tds[0].innerText);
$('.modal input[name="id"]').val(tds[1].innerText);
*/
$(this).parent().prevAll().each(function () {
var text = $(this).text();
var name = $(this).attr('alex');
$('.model input[name="' + name +'"]').val(text);
}) })
} ---------------------------------------------------- 分页实现(自定义,非插件)
---------------------------------------------------
django建立管理系统之五----单页ajax数据交互的更多相关文章
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- 弹出层和ajax数据交互
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!
纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...
- Django学习笔记(8)——前后台数据交互实战(AJAX)
这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- DEDECMS之五 单页
在网站开发中经常碰到关于我们.联系方式等简单的页面,那么在DEDECMS中如何实现? 一.效果 以上左侧导航的链接都是单页,右边为内容部分 二.单页的实现 创建频道封来实现 1.常规选项 2.高级选项 ...
- ajax数据交互
目录 一.ORM查询优化 1-1. only与defer 1-2. select_related与prefatch_related 二.MTV与MVC模型 三.choices参数 四.AJAX 4-1 ...
- Struts2与Ajax数据交互
写在前面: ajax请求在项目中常常使用,今天就平时掌握的总结一下,关于使用ajax请求到Struts2中的action时,前台页面与后台action之间的数据传递交互问题. 这里我主要记录下自己所掌 ...
- Django框架form表单配合ajax注册
总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...
随机推荐
- ZigZag Conversion 之字形转换字符串
1.题目 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows ...
- NE76003单片机调试DS18B20 步骤
一.硬件部分 GND脚接地: DQ脚接P03,外加4K7上拉电阻: VCC脚接3.3v供电: 二.软件部分 1.配置P03为准准双向 IO类型: void Init_power_gpio(void){ ...
- letecode242有效字母的异位词
bool isAnagram(char* s, char* t) { ] = {}; ] = {}; int lenS = strlen(s); int lenT = strlen(t); ;i< ...
- C/C++控制台接收不到鼠标消息-【解决办法】
控制台编程中,使用了鼠标操作,遇到了控制台无法接收到鼠标消息的问题,可尝试一下办法解决 [win10系统] 在控制台标题栏右键-默认值-选项,将一下对勾取消 然后调用如下函数: HANDLE hIn ...
- 【深入Java虚拟机(1)】:Java内存区域与内存溢出
原文出处: 兰亭风雨 内存区域 Java虚拟机在执行Java程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java虚拟机规范将JVM所管理的内存分为以下几个运行时数据区:程序计数器.Jav ...
- 利用linux curl爬取网站数据
看到一个看球网站的以下截图红色框数据,想爬取下来,通常爬取网站数据一般都会从java或者python爬取,但本人这两个都不会,只会shell脚本,于是硬着头皮试一下用shell爬取,方法很笨重,但旨在 ...
- hbase-hive整合及sqoop的安装配置使用
从hbase中拿数据,然后整合到hbase中 上hive官网 -- 点击wiki--> hive hbase integation(整合) --> 注意整合的时候两个软件的版本要能进行整 ...
- Java框架spring 学习笔记(十二):aop实例操作
使用aop需要在网上下载两个jar包: aopalliance.jar aspectjweaver.jar 为idea添加jar包,快捷键ctrl+shift+alt+s,打开添加jar包的对话框,将 ...
- java itext替换PDF中的文本
itext没有提供直接替换PDF文本的接口,我们可以通过在原有的文本区域覆盖一个遮挡层,再在上面加上文本来实现. 所需jar包: 1.先在PDF需要替换的位置覆盖一个白色遮挡层(颜色可根据PDF文字背 ...
- Selenium+Java的TestNG测试报告优化
本博主很懒,但学习很勤快,一般能从博客园直接转载的东西,本博主绝不动手写,无奈Selenium+java生成的测试报告在百度上搜索..反正我是没有看到.后来才知道TestNG它可以自动生成测试报告,但 ...