emo前端
1 点击按钮可以在form中添加input控件,以name给input编号,然后点击按钮ajax上传表单,在回调函数中弹框显示结果:
<form id="newfriends" action="{% url 'newfriends' %}">
<span>朋友姓名:</span>
<input name="{{ KEY_OF_FRIEND_NAME }}" type="text">
</form>
<button type="button" id="submit_newfriends">提交</button>
<button type="button" id="add_text_label">添加文字标签</button>
<button type="button" id="add_num_label">添加数值标签</button>
<script>
{# 除了名字外标签的个数#}
var num_text = 0;
var num_num = 0;
{# 添加文字标签#}
$('#add_text_label').click(function (e) {
$('#newfriends').append('<br><span>文字标签内容:</span><input name="'+num_text+'" type="text">');
num_text++;
});
{# 添加数值标签#}
$('#add_num_label').click(function (e) {
$('#newfriends').append('<br><span>数值标签名:</span><input name="title'+num_num+'" type="text"><span>数值标签内容:</span><input name="content'+num_num+'" type="number">');
num_num++;
});
$('#submit_newfriends').click(function (e) {
let f=$('#newfriends')[0];
console.log("f",f);
let formData=new FormData(f);
console.log("formData",formData);
$.ajax({
url:"{% url 'newfriends' %}",
type:"POST",
dataType:"json",
cache:false,
data:formData,
contentType:false,
processData:false,
success:function (data) {
$('#newfriends').innerHTML="hello!";
alert('yes');
},
error: function (res) {
alert('no');
}
})
})
</script>
因为是在127.0.0.1上调试的,所以不存在跨域问题,部署后还需要注意跨域问题。
注意,在后端给ajax返回结果的时候,应当用HttpResponse(),而不应该直接json.dumps,如下
错误:ajax将执行error定义的函数
正确:ajax将执行success定义的函数
emo前端的更多相关文章
- 记录一次参加D2前端技术论坛的杭州之行
前言 在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结:Mac前端开发环境的搭建(配置)
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
随机推荐
- atitit.jndi的架构与原理以及资源配置and单元测试实践
atitit.jndi的架构与原理以及资源配置and单元测试实践 1. jndi架构 1 2. jndi实现原理 3 3. jndi资源配置 3 3.1. resin <database> ...
- android-退出动画无效
在调用 overridePendingTransition(R.anim.anim_scale_in, R.anim.anim_scale_out); 方法设置某个Activity进入和退出动画的时候 ...
- 1.GCC编译过程
一. GCC编译过程 gcc -E hello.c -o hello.i // 预处理.将代码中包含的头文件和宏进行替换 gcc -S hello.i -o hello.s // 汇编.将当前文本转换 ...
- java中调用数据库中的存储过程和函数
public static void main(String[] args) { Connection conn =getConnection(url,user, pwd); ...
- CentOS装JDK1.8
1.下载jdk1.8:http://download.csdn.net/download/yichen01010/10017267 直接使用liunx下默认安装的浏览器 下载 2.卸载系统自带的jdk ...
- 从头认识java-17.4 具体解释同步(2)-具体解释竞争条件
这一章节我们来具体讨论一下竞争条件. 1.为什么会引起竞争条件? 因为操作缺失原子性. 2.什么是原子性? 所谓原子操作是指不会被线程调度机制打断的操作:这样的操作一旦開始,就一直运行到结束.中间不会 ...
- 读取csv格式的数据
1.直接上代码,关键是会用 2.代码如下: <?php #添加推荐到英文站 $file = fopen('code.csv','r'); while ($data = fgetcsv($file ...
- eclipse ${user}和${date}
在Eclipse中使用类的自动注释时,@author ${user}, 这个值不会随着你更改系统用户名而改变.有的人会将这个 ${user} 变量直接替换为某个固定名称. 以下方法可以修改它的值. 在 ...
- AndroidManifest.xml文件详解(activity)(二)
android:configChanges 这个属性列出了那些需要Activity进行自我处理的配置变化.当在运行时配置变化发生的时候,默认情况下,这个Activity会被关掉并重启,但是用这个属性声 ...
- 应用IBatisNet+Castle进行项目的开发
最近在做一个项目,项目的需求不够明确,这是做项目的大忌,但是没有办法.项目的架构采用Dotnet平台使用C#进行开发,为了加快项目的开发进度,采用代码生成工具之MyGeneration 生成业务基本代 ...