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. 函数后面跟throw

    1.函数后面跟throw(),表示该函数不会抛出异常 2.函数后面跟throw(...),表示该函数可能会抛出任何形式的异常 3.函数后面跟throw(int),表示该函数只抛出int类型的异常

  2. bzoj2301

    题解: 莫比乌斯反演 再加上一个分块 然后和上一题差不多了 代码: #include<cstdio> #include<cmath> #include<algorithm ...

  3. 阿里云服务器上安装mysql的详细步骤

    阿里云安装mysql (1)下载mysql安装包,去mysql官网下载对应的包 mysql数据库官方下载网址:   https://downloads.mysql.com/archives/commu ...

  4. JNA调用DLL（入门）：让你一眼就学会

    DLL(Dynamic Link Library)文件,是基于C语言的动态链接库文件,就是一些封装好的方法,打成dll格式包,供别人调用 JNA是一种能够使Java语言使调用DLL的一种技术, 首先, ...

  5. winserver 搭建 Citrix License 许可服务器

    1.  申请许可证 Citrix XenApp_XenDesktop7.6和XenServer 6.5申请许可证的步骤是一致的,由于之前我已经申请过XenApp_XenDesktop的许可证,本次以X ...

  6. 前端关于列表的基础 day47

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8&qu ...

  7. python--Selenium-模拟浏览器

    python--Selenium-模拟浏览器基本使用from selenium import webdriverfrom selenium.webdriver.common.by import Byf ...

  8. rem问题

    rem为单位时,根元素html的font-size 必须>=12px,否则 默认为font-size:12px. 为啥 html 设置成 62.5%,或者 10px 时,这种换算无效了呢?经过研 ...

  9. Enhancement in SAP abap.

    Recently I have been taught through how to do enhancement for those standard programs. Th reason for ...

  10. 2017第八届蓝桥杯C/C++ B组省赛-日期问题

    标题:日期问题 小明正在整理一批历史文献.这些历史文献中出现了很多日期.小明知道这些日期都在1960年1月1日至2059年12月31日.令小明头疼的是,这些日期采用的格式非常不统一,有采用年/月/日的 ...