Django Ajax 基于Jquery使用方法与案例

特点

• 异步请求
• 局部刷新

基于Jquery实现AJAX最简单案例

HTML

<script>
  $("#id").click(function () {  //获取到按钮的点击事件
    $.ajax({
      url: "/ajax_test/", //请求地址
      type: "POST",       //请求类型
      data: {             //发送数据  键值对形式
          username: "Q1mi", 
          password: 123456
          },
      success: function (data) {
        alert(data)  //回调函数
      }
    })
  })
</script>

视图

def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    res = {'user': None, 'msg': None} # 自定义一个字典存储登录账户，和登录错误信息

    # ....进行登录验证


    # res 是py的字典，不能直接传， 必须json传过去
    import json
    return HttpResponse(json.dumps(res))  # jq那边在 用js的反序列方法转换即可

---

Jquery反序列化Json

//回调函数
success:function (data) {
                console.log(data)           // 这是json字符串
                var data = JSON.parse(data) //JS 的json反序列化方法
                if (data.user){             //用点的方法取出键值
                    console.log('登录成功')  
                }
                else{
                    console.log('登录失败')
                }
            }

---

Jquery序列化Json

    $('.btn').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json', //编码类型设置为json ，默认是urlencode: 参数=值&参数=值 格式
            data:JSON.stringify({  //要传json数据必须，转换类似python 的dumps
                a:1,
                b:2,
            }),
            success:function (data) {
                console.log(data)
            }
        })
    })

上传文件

HTML中

必须new一个FormData()

    $('.put').click(function () {

        var formData = new FormData();
        // 两个键值对 用户名 和头像
        formData.append('user',$('.user').val());
        formData.append('avatar',$('.avatar')[0].files[0]); // 固定语法取文件
        // 必须加上token
        formData.append('csrfmiddlewaretoken', $("[name='csrfmiddlewaretoken']").val());

        $.ajax({
            url:'',
            type:'post',

            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,

            data:formData,
            success:function (data) {
                console.log(data)
            }
        })
    })

视图中

request.FILES就能获取到文件，然后用with open