urs.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$',views.index),
    url(r'^upload_file/$',views.upload_file)
]

views.py

from django.shortcuts import render,HttpResponse
from app01 import models
from django.http import JsonResponse
# Create your views here.

def index(request):
    return render(request,'index.html')

def upload_file(request):
    '''文件上传'''
    import json
    dic = {'status':100,'msg':None}
    if request.method == 'POST':
        # post形式上传json格式数据，POST中没有值，在body中取出
        upload_dic = json.loads(request.body)
        name = upload_dic['name']
        pwd = upload_dic['pwd']
        user = models.User.objects.filter(name=name,pwd=pwd).first()
        if user:
            dic['msg'] = '登陆成功'
        else:
            dic['status'] = 101
            dic['msg'] = '账号或密码错误'
        # 这里注意返回一定是Json格式返回
        return JsonResponse(dic)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jquery.js"></script>
    <title>ajax</title>
</head>
<body>
<h1>Ajan实现json格式的数据传输</h1>
<p>用户名：<input type="text" name="'name" id="name"></p>
<p>密码：<input type="password" name="pwd" id="pwd"></p>
<button id="btn2">点击登录</button>
<span id="errors"></span>

</body>
<script>
    $("#btn2").click(function () {
        var upload_data = {name:$('#name').val(),pwd:$('#pwd').val()}
        {#js语法把字典格式转成json格式字符串#}
        var upload_json = JSON.stringify(upload_data)
        {#js语法把json字符串转成原生的格式#}
        {#var json_parse = JSON.parse(upload_data)#}
        $.ajax({
            url: '/upload_file/',
            type: 'post',
            contentType: 'application/json',  //指定格式为json格式
            data: upload_json,
            success: function (data) {
                console.log(data)
                if (data.status==100){
                    location.href = 'http://www.baidu.com'
                }else{
                    $('#errors').text(data.msg)
                }
            }
        })
    })
</script>
</html>

（24）ajax上传json格式的数据的更多相关文章

  1. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  2. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  3. $.ajax返回的JSON格式的数据后无法执行success的解决方法

    近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...

  4. java实现服务端守护进程来监听客户端通过上传json文件写数据到hbase中

    1.项目介绍: 由于大数据部门涉及到其他部门将数据传到数据中心,大部分公司采用的方式是用json文件的方式传输,因此就需要编写服务端和客户端的小程序了.而我主要实现服务端的代码,也有相应的客户端的测试 ...

  5. ajax上传json串格式的数据的处理 以及 js操作dom的另一种方式

  6. ajax往后台传json格式数据报415错误

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...

  7. 说说ajax上传数据和接收数据

    我是一个脑袋不太灵光的人,所以遇到问题,厚着脸皮去请教大神的时候,害怕被大神鄙视,但是还是被鄙视了.我说自己不要点脸面,那是不可能的,但是,为了能让自己的技术生涯能走的更长远一些,受点白眼,受点嘲笑也 ...

  8. day060 ajax文件上传 json补充

    请求头ContentType 文件上传时需要指定请求头,常见的类型有3种: 1.application/x-www-form-urlencoded(可以类比成在url后面拼接的形式发送,即a=1&am ...

  9. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

随机推荐

  1. html <iframe>介绍

    iframe 元素会创建包含另外一个文档的内联框架 属性 值 描述 align left.right.top.middle.bottom 不赞成使用.请使用样式代替.规定如何根据周围的元素来对齐此框架 ...

  2. QuickStart系列：docker部署之MariaDB

    Centos7里面没有Mysql 取而代之的是MariaDB,MariaDB是完全开源的.MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的 ...

  3. [HDU3726]Graph and Queries

    Problem 给你一张图,点的权值,边和几个操作: D x: 删除第x条边 Q x y: 询问包含x的联通块中权值第y大的权值 C x y: 将x这个点的权值改为y Solution 一看就要离线处 ...

  4. 图的关键路径，AOE，完整实现，C++描述

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. JDK（java se development kit）的构成

    1.javac(Java compiler)编译器 通过命令行输入javac命令调用Java编译器,编译Java文件的过程中,javac会检查源程序是否符合Java的语法,没有语法 问题就会将.jav ...

  6. VSTO：使用C#开发Excel、Word【２】

    <Visual Studio Tools for Office: Using C# with Excel, Word, Outlook, and InfoPath >——By Eric C ...

  7. python常见面试题（mark）

    1.大数据的文件读取 ① 利用生成器generator ②迭代器进行迭代遍历:for line in file 2.迭代器和生成器的区别 1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方 ...

  8. Android : 基于alsa库的音乐播放

    继上篇:Android : alsa-lib 移植 ,这篇随笔实现一个demo基于移植好的alsa库在Android平台上播放wav文件: 一.利用ffmeg将一个mp3文件转换成wav文件: (1) ...

  9. 谈谈你对Java面向对象的理解

    面向对象,其实是一种思考的思想,是一种思想,而这种思想它早期的思想是面向过程,通过不断的演化变成了现在的面向对象,思想有一个演变形式,早期是面向过程,现在是面向对象. 故事:把大象放进冰箱里,分几步? ...

  10. DevExpress WPF v18.2新版亮点（三）

    买 DevExpress Universal Subscription  免费赠 万元汉化资源包1套! 限量15套!先到先得,送完即止!立即抢购>> 行业领先的.NET界面控件2018年第 ...