Ajax 实战（一）

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
目录* Ajax 实战（一）
+ 简介
+ 入门案例
+ 基于Ajax进行登录验证
+ HTTP请求编码格式和报文
- Content-Type=application/x-www-form-urlencoded
- Content-Type=multipart/form-data
- Content-Type=text/plain
- 总结
+ 上传文件
+ Ajax上传json格式
+ django内置序列化

Ajax 实战（一）

简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求；

优点

• 异步
• 局部刷新：不需要刷新整个页面，节省了资源的消耗，给用户的体验极佳

常见应用场景

入门案例

'''
需求：
实现简单的计算器，加法举例
通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面
'''

'''urls.py'''
path('', views.test_Ajax)

'''views.py'''
from django.shortcuts import render, HttpResponse

def test\_Ajax(request):
    if request.method == 'POST':
        num1 = int(request.POST.get('num1')) # 获取前端提交的数据
        num2 = int(request.POST.get('num2'))
        print(num1, num2)
        return HttpResponse(num1 + num2) # 返回给前端
    return render(request, 'sum.html')

'''sum.html'''
'''html结构'''
<div class="container">
    <div class="row">
        <h1 class="text-center">Ajaxh1>
 <div class="col-md-6 col-lg-offset-3 ">
 <input type="text" id="d1" class="active form-control">
 <p class="text-center">+p>
 <input type="text" id="d2" class="sucess form-control">
 <p class="text-center">=p>
 <input type="text" id="d3" class="info form-control">
 <br>
 <button id='btn' class="btn btn-success btn-block">calculatebutton>
 div>
 div>
div>
'''js实现'''
<script>
 {#绑定点击事件#}
 $('#btn').click(function () {
 {#获取input元素内输入的值#}
 var num1 = $('#d1').val()
 var num2 = $('#d2').val()

 $.ajax({
 url: '', //ajax请求的地址
 method: 'post', //请求方式
 data: {num1: num1, num2: num2}, //携带参数
 success: fu