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. day29-python阶段性复习三

    七.python打开文件方式 open r: 读的方式 w:已写的方式打开 a:以追加的方式 r+ 读写模式 w+ 读写 a+ 读写 rb:二进制读模式打开 wb:以二进制写模式打开 ab 二进制追加 ...

  2. flask项目结构（二）创建flask，同步docker

    简介: 建立flask容易,那么部署就比较麻烦了,配这个,配那个,更新………… 所以我从构建,就考虑部署的问题,使用docker部署. 程序都打包进docker,本博客有相关文章. pycharn直接 ...

  3. 读书笔记 C#委托的BeginInvoke、EndInvoke之浅析

    c#中有一种类型叫委托,它是一种引用类型.可以引用静态与非静态的方法,且这些方法的参数列表和返回值类型必须与所声明的委托一致. 委托引用的方法可以通过BeginInvoke和EndInvoke来异步进 ...

  4. [leetcode53]最长子数组 Maximum Subarray Kadane's算法

    [题目] Given an integer array nums, find the contiguous subarray (containing at least one number) whic ...

  5. 如何使用VSTO自动将Excel中的图表复制到Word

    如何使用VSTO自动将Excel中的图表复制到Word 原文地址:https://code.msdn.microsoft.com/How-to-copy-Chart-in-Excel-a29f9029 ...

  6. Oracle 定时器

    我的代码 declare job number; begin dbms_job.submit( JOB=>job, what=>'addBytime;',// 这里要写分号,不然容易出错. ...

  7. 安装vue-cookie

    // 安装cookie的命令// npm install vue-cookie --save// 为项目配置全局vue-cookieimport VueCookie from 'vue-cookie' ...

  8. JQ 设置控件显示 隐藏

    ("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&qu ...

  9. Python用户交互

    print("开始") # 赋值,把等号右边的内容赋值给左边 s = input() #input("这里是input")# input输入,让用户输入一些内容 ...

  10. 小技巧, 批处理修改IP

    相信很多人都有这样的麻烦, 工作单位的IP网段与住的不一致, 自己的笔记本在单位和回家的时候每次都要更改IP, 很麻烦,  菜鸟小罗偷个懒, 做了个批处理来修改IP,方便一点. 还有就是可以把工作的时 ...