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. C++中类的静态成员与实例成员的区别

    C++中类的静态成员与实例成员的区别 1.有static修饰的成员变量或成员函数称为静态成员. 2.在内存中,类的静态数据成员占有一块特定的内存空间,被该类的所有实例(对象)共享.而同一个类的不同对象 ...

  2. export及export default

    const a=2; const b=3; const c=function(){console.log(a+b} export a; export b; export default c; 如上文件 ...

  3. what’s this？

    jdk,jre,jvm三者区别:JDK: (Java Development ToolKit) java开发工具包.JDK是整个java的核心! 包括了java运行环境 JRE(Java Runtim ...

  4. 一次jenkins的错误

    描述:我svn修改了一个类的名称,然后构建到jenkins发现,原来的类还在然后和现在的类一起冲突 解决:清理工作空间 然后重新部署即可.

  5. day056 多表增加和查询

    今日总结: 多表的增删改查操作 多表操作 增 book id title book_detail publish author onetoone manytoone manytomany book_o ...

  6. day 69 权限的设置

    1.权限控制 1). 表结构的设置 2). 流程 1.登录 get: 通过中间件的白名单 re 获取到登录页面 post: 通过中间件的白名单,认证成功,保存权限信息, --ORM 去空的权限 去重 ...

  7. Factory，工厂设计模式，C++描述

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

  8. SQL-10 获取所有非manager的员工emp_no

    题目描述 获取所有非manager的员工emp_noCREATE TABLE `dept_manager` (`dept_no` char(4) NOT NULL,`emp_no` int(11) N ...

  9. android 自定义命名空间 http://schemas.android.com/apk/res-auto

    XML中用 xmlns="http://schemas.android.com/apk/res-auto" 获取自定义属性值: public static String NAMES ...

  10. 《深入分析Java Web技术内幕》读书笔记 - 第1章 深入Web请求过程

    第1章 深入Web请求过程 1 1.1 B/S网络架构概述 2 基于统一的应用层协议HTTP来交互数据. 1.2 如何发起一个请求 4 HTTP连接本质是建立Socket连接.请求实现方式:工具包如H ...