码迷,mamicode.com
首页 > Web开发 > 详细

Django Ajax学习一

时间:2017-11-14 14:29:08      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:cli   错误   简单的   imp   发送   rect   erro   redirect   post   

1. 简单的加法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<input type="text" name="a" id="a"><span>+</span><input type="text" name="b" id="b">
<button class="action">=</button>
<input type="text" name="sum" id="c">

<script src="jquery-3.2.1.min.js"></script>

<script>
    $(".action").click(function () {
        a = parseInt($("#a").val());
        b = parseInt($("#b").val());
        c=a+b;
        $.ajax($("#c").val(c))
    })
</script>


</body>
</html>

2.  用户登录验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="/get_OK/">点击</a><span class="error"></span>


<p>姓名:<input type="text" name="name"></p>
<p>密码:<input type="password" name="pwd"></p>
<span class="login_error"></span>
<p>
    <button class="Ajax_send">Ajax_send</button>
</p>




<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    $(".Ajax_send").click(function () {
        // ajax请求

        $.ajax({
            url: "/get_ajax/",
            type: ‘GET‘,
            data: JSON.stringify({
                name: $(":text").val(),
                pwd: $(":password").val()
            }),
            contentType:"application/json",
            success: function (data) {
                console.log(data);
                var data=JSON.parse(data);
                if(!data){
                    $(".login_error").html(‘用户名或密码错误‘);
                }
            }
        })

    })
</script>

</body>
</html>

3. 视图函数

import json
from django.shortcuts import render,redirect,HttpResponse

# Create your views here.

def index(request):
    return render(request,‘index.html‘)



def get_OK(request):
    return render(request,‘get_OK.html‘)

def get_ajax(request):
    username=request.GET.get(‘name‘)
    password=request.GET.get(‘pwd‘)

    flag=False
    if username=="yuan" and password ==‘123‘:
        flag =True

    return HttpResponse(json.dumps(flag))

3.  参数说明:

######################------------data---------################

       data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认地把它编码成某种格式
             (urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。

             function testData() {
               $.ajax("/test",{     //此时的data是一个json形式的对象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;if为false,
             那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString()
             ,最后得到一个[object,Object]形式的结果。
            
######################------------contentType---------################

contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,
             比如contentType:"application/json",即向服务器发送一个json字符串:
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象


######################------------traditional---------################

traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代;

待续.. ...  

  

  

 

Django Ajax学习一

标签:cli   错误   简单的   imp   发送   rect   erro   redirect   post   

原文地址:http://www.cnblogs.com/supery007/p/7831307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!