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前端的更多相关文章

  1. 记录一次参加D2前端技术论坛的杭州之行

    前言 在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...

  2. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  3. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  6. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  8. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  9. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

随机推荐

  1. atitit.jndi的架构与原理以及资源配置and单元测试实践

    atitit.jndi的架构与原理以及资源配置and单元测试实践 1. jndi架构 1 2. jndi实现原理 3 3. jndi资源配置 3 3.1. resin  <database> ...

  2. android-退出动画无效

    在调用 overridePendingTransition(R.anim.anim_scale_in, R.anim.anim_scale_out); 方法设置某个Activity进入和退出动画的时候 ...

  3. 1.GCC编译过程

    一. GCC编译过程 gcc -E hello.c -o hello.i // 预处理.将代码中包含的头文件和宏进行替换 gcc -S hello.i -o hello.s // 汇编.将当前文本转换 ...

  4. java中调用数据库中的存储过程和函数

    public static void main(String[] args)    {         Connection conn =getConnection(url,user, pwd);   ...

  5. CentOS装JDK1.8

    1.下载jdk1.8:http://download.csdn.net/download/yichen01010/10017267 直接使用liunx下默认安装的浏览器 下载 2.卸载系统自带的jdk ...

  6. 从头认识java-17.4 具体解释同步(2)-具体解释竞争条件

    这一章节我们来具体讨论一下竞争条件. 1.为什么会引起竞争条件? 因为操作缺失原子性. 2.什么是原子性? 所谓原子操作是指不会被线程调度机制打断的操作:这样的操作一旦開始,就一直运行到结束.中间不会 ...

  7. 读取csv格式的数据

    1.直接上代码,关键是会用 2.代码如下: <?php #添加推荐到英文站 $file = fopen('code.csv','r'); while ($data = fgetcsv($file ...

  8. eclipse ${user}和${date}

    在Eclipse中使用类的自动注释时,@author ${user}, 这个值不会随着你更改系统用户名而改变.有的人会将这个 ${user} 变量直接替换为某个固定名称. 以下方法可以修改它的值. 在 ...

  9. AndroidManifest.xml文件详解(activity)(二)

    android:configChanges 这个属性列出了那些需要Activity进行自我处理的配置变化.当在运行时配置变化发生的时候,默认情况下,这个Activity会被关掉并重启,但是用这个属性声 ...

  10. 应用IBatisNet+Castle进行项目的开发

    最近在做一个项目,项目的需求不够明确,这是做项目的大忌,但是没有办法.项目的架构采用Dotnet平台使用C#进行开发,为了加快项目的开发进度,采用代码生成工具之MyGeneration 生成业务基本代 ...