第一个示例：（i1+i2 ）

前端数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="i1">+

<input type="text" id="i2">=

<input type="text" id="i3">

<input type="button" value="ajax请求" id="b1">

<script src="/static/jquery-3.3.1.js"></script>

<script>

    $("#b1").on("click",function () {

        //点击id是b1的按钮要做的事

        var i1 =$("#i1").val();

        var i2 =$("#i2").val();

        //往后端提前数据

         $.ajax({

             url:"/ajax_add/",

             type:"get",

             data:{"i1":i1,"i2":i2},

             success:function (arg) {

             alert(arg);

             $("#i3").val(arg)

            }

         })

    })

</script>

</body>

</html>

　　view视图

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request,'index.html')

def ajax_add(request):

    print("+++++++++++++++++++++++")

    print(request.GET)

    # print(request.GET.get("i1"))

    # print(request.GET.get("i2"))

    i1 =int(request.GET.get("i1"))

    i2 =int(request.GET.get("i2"))

    ret =i1+i2

    return HttpResponse(ret)

第二个示例（post请求+get）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

{% csrf_token %}

<input type="text" id="i1">+

<input type="text" id="i2">=

<input type="text" id="i3">

<input type="button" value="get请求" id="b1">

<input type="button" value="post请求" id="b3">

<script src="/static/jquery-3.3.1.js"></script>

<script>

    {###################下面为GET请求#################}

    $("#b1").on("click",function () {

        //点击id是b1的按钮要做的事

        var i1 =$("#i1").val();

        var i2 =$("#i2").val();

        //往后端提前数据

         $.ajax({

             url:"/ajax_add/",

             type:"get",

             data:{"i1":i1,"i2":i2},

             success:function (arg) {

             {#alert(arg);#}

             $("#i3").val(arg)

            }

         })

    })

        {###################下面为post请求带上csrftoken#################}

        $("#b3").on("click",function () {

        //点击id是b1的按钮要做的事

        var i1 =$("#i1").val();

        var i2 =$("#i2").val();

        //找到页面上的csrftoken

        var csrfToken=$("[name='csrfmiddlewaretoken']").val();

        //往后端提前数据

         $.ajax({

             url:"/ajax_add3/",

             type:"post",

             data:{"i1":i1,"i2":i2,"csrfmiddlewaretoken":csrfToken},

             success:function (arg) {

             {#alert(arg);#}

             $("#i3").val(arg)

            }

         })

    })

</script>

</body>

</html>

　views视图

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request,'index.html')

def ajax_add(request):

    print("get请求+++++++++++++++++++++++")

    print(request.GET)

    # print(request.GET.get("i1"))

    # print(request.GET.get("i2"))

    i1 =int(request.GET.get("i1"))

    i2 =int(request.GET.get("i2"))

    ret =i1+i2

    return HttpResponse(ret)

def ajax_add3(request):

    print("post请求+++++++++++++++++++++++")

    print(request.POST)

    # print(request.GET.get("i1"))

    # print(request.GET.get("i2"))

    i1 =int(request.POST.get("i1"))

    i2 =int(request.POST.get("i2"))

    ret =i1+i2

    return HttpResponse(ret)

路由配置

"""

from django.conf.urls import url

from django.contrib import admin

from  app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^index/', views.index),

    url(r"^ajax_add/",views.ajax_add),  # get请求

    url(r"^ajax_add3/",views.ajax_add3),    #post请求

]

三、部分序列化知识

===================================================================================================================================

一、什么是ajax ?

1.什么是json

json指的是javascript对象表示法（javascript object notation）

json是轻量级的文本数据交换格式.

json独立于语言

json 使用javascript 语法来描述数据对象，但json仍然独立于语言和平台。

pickle只有python能用.

一、案例

一、HTML 语言文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

<input type="text" id="i1">+

<input type="text" id ='i2'>=

<input type="text" id ='i3'>

<input type="button" value="ajax提交" id="b1">

<script src="/static/jquery-3.3.1.js"></script>

<script>

    $('#b1').on('click',function(){

        //点击id是b1的按钮要做的事

        var  i1 =$('#i1').val();

        var  i2 =$('#i2').val();

        //往后端发数据

        $.ajax({

            url:'/ajax_add/',

            type:'get',

            data:{'i1':i1,'i2':i2},

            success:function (args)

        {

            {#alert(args);#}

            // 把返回的结果填充到id是id的input框中

            $('#i3').val(args)

        }

        })

    });

</script>

</body>

</html>

二、URL文件

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    # url(r'^ajax_add/',views.ajax_add),

    url(r'^login/$',views.login),

    # url( r'^transfer/',views.transfer),

    url(r'^home/',views.home),

    url(r'^ajax_add/',views.ajax_add),

    url(r'^index/',views.index),

    url(r'^test/',views.test),

]

三、views文件

def ajax_add(request):

    print(request.GET)

    print(request.GET.get('i1'))

    print(request.GET.get('i2'))

    i1 =int(request.GET.get('i1'))

    i2 =int(request.GET.get('i2'))

    ret =i1 +i2

    return  HttpResponse(ret)

四、输出结果

五、访问网页

三、Ajax 发送post请求

<form action="/form_add/" method="post">

{% csrf_token %}

    <input type="text" name="user">

    <input type="password" name="pwd">

    <input type="submit">

</form>

<script src="/static/jquery-3.3.1.js"></script>

<script src="/static/setupajax.js"></script>

<script>

  $("#b1").on("click", function () {

    // 点击 id是b1的按钮要做的事儿

      var i1 = $("#i1").val();

      var i2 = $("#i2").val();

      // 往后端发数据

      $.ajax({

          url: "/ajax_add/",

          type: "get",

          data: {"i1": i1, "i2": i2},

          success: function (arg) {

              {#alert(arg);#}

              // 把返回的结果填充到 id是i3的input框中

              $("#i3").val(arg);

          }

      })

  });

    $("#b3").on("click", function () {

    // 点击 id是b1的按钮要做的事儿

      var i1 = $("#i1").val();

      var i2 = $("#i2").val();

      // 找到页面上csrf_token

        // var csrfToken = $("[name='csrfmiddlewaretoken']").val();

      // 往后端发数据

      $.ajax({

          url: "/ajax_add3/",

          type: "post",

          data: {"i1": i1, "i2": i2},

          success: function (arg) {

              {#alert(arg);#}

              // 把返回的结果填充到 id是i3的input框中

              $("#i3").val(arg);

          }

      })

  });

    $("#b2").on("click", function () {

        $.ajax({

            url: "/test/",

            type: "get",

            success:function (a) {

                location.href = a;

                // alert(a);

                // 在页面上创建一个标签

                //var imgEle = document.createElement("img");

                //imgEle.src = a;

                // 把创建的img标签添加到文档中

                //$("#b2").after(imgEle);

            }

        })

    })

四、序列化

Django内置的serializers

def books_json(request):

    book_list = models.Book.objects.all()[:]

    from django.core import serializers

    ret = serializers.serialize("json", book_list)

    return HttpResponse(ret)

我们的数据中经常有日期时间，也就是datetime对象，而json.dumps是无法处理这样在类型的，那就需要通过自定义处理器来做扩展，如下：

class JsonCustomEncoder(json.JSONEncoder):

    """

    自定义一个支持序列化时间格式的类

    """

    def default(self, o):

        if isinstance(o, datetime):

            return o.strftime("%Y-%m-%d %H:%M:%S")

        elif isinstance(o, date):

            return o.strftime("%Y-%m-%d")

        else:

            return json.JSONEncoder.default(self, o)

def books_json(request):

    book_list = models.Book.objects.all().values_list("title", "publish_date")

    ret = json.dumps(list(book_list), cls=JsonCustomEncoder)

    return HttpResponse(ret)

五、补充一个SweetAlert插件示例

https://github.com/lipis/bootstrap-sweetalert 下载sweetalert 插件

$(".btn-danger").on("click", function () {

  swal({

    title: "你确定要删除吗？",

    text: "删除可就找不回来了哦！",

    type: "warning",

    showCancelButton: true,

    confirmButtonClass: "btn-danger",

    confirmButtonText: "删除",

    cancelButtonText: "取消",

    closeOnConfirm: false

    },

    function () {

      var deleteId = $(this).parent().parent().attr("data_id");

      $.ajax({

        url: "/delete_book/",

        type: "post",

        data: {"id": deleteId},

        success: function (data) {

          if (data.status === 1) {

            swal("删除成功!", "你可以准备跑路了！", "success");

          } else {

            swal("删除失败", "你可以再尝试一下！", "error")

          }

        }

      })

    });

})

day72 Ajax 第一天的更多相关文章

[妙味Ajax]第一课：原理和封装
知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...
Ajax第一天——入门与基本概念
什么是Ajax Ajax被认为是(Asynchronous JavaScript and XML的缩写).异步的js和xml 异步和同步:同步->类似打电话,接完一个再接下一个:异步:-> ...
ajax第一天总结
AJAX开发步骤步一:创建AJAX异步对象,例如:createAJAX() 步二:准备发送异步请求,例如:ajax.open(method,url) 步三:如果是POST请求的话,一定要设置AJAX ...
ajax 第一个程序
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Ajax第一课
<script language="javascript"></script> Javascript 函数创建 function 函数名(){ ...
springmvc+ajax——第一讲（搭建）
下面是整个整合测试的代码: ajax01.html TestController web.xml springmvc.xml applicationContext.xml <!DOCTYPE h ...
【JavaScript】--ajax
1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...
四步完成ajax的使用
什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp ...
ajax 基础教程
这是一本什么书?这是一本技术类的书籍,主要从历史.XMLHttpRequest对象.怎么样于服务器交互.构建完备的Ajax开发工具箱.使用jsUnit测试javascript 代码,总之就是让我们从这 ...

随机推荐

Golang实现一个密码生成器
小地鼠防止有人偷他的果实,在家里上了一把锁.这个锁怎么来的呢?请往下看.. package main import ( "flag" "fmt" "m ...
PAT 1052 卖个萌 (20)（代码+思路）
1052 卖个萌 (20)(20 分) 萌萌哒表情符号通常由"手"."眼"."口"三个主要部分组成.简单起见,我们假设一个表情符号是按下列格 ...
mongodb的安装配置方法
安装方法: https://docs.mongodb.com/manual/tutorial/install-mongodb-enterprise-on-red-hat/ 使用向导: https:// ...
code1002 搭桥
最小生成树每读入一个城市,把他与之前的所有城市做一次link() link的内容: 1.如果两个城市直接相连,合并他们的集合(并查集)2.如果两个城市可以搭桥,添加一条边来连接.如果不可以搭桥,什么 ...
调用数据库-corina
pym = mysql(host='#####', port=3306, user='######', password='########', database='algorithm') #查询数据 ...
2、HttpClient修改处理策略Strategy
HttpClient提供了很多接口,让我们能自定义处理逻辑,这些接口可以在AbstractHttpClient中找到: setAuthSchemes(AuthSchemeRegistry); setC ...
Android窗口背景的优化
视图有背景,每个窗口也是有背景的.每一Activity是一个窗口,每一个Activity都有不同得背景.界面的绘画顺序如下:窗口——跟视图 ——子视图.当我们的跟视图已经覆盖了整个窗口的时候 ,程序还 ...
2018.10.19 bzoj1057: [ZJOI2007]棋盘制作（悬线法）
传送门悬线法板题. 如果只求最大矩形面积那么跟玉蟾宫是一道题. 现在要求最大正方形面积. 所以每次更新最大矩形面积时用矩形宽的平方更新一下正方形答案就行了. 代码: #include<bits ...
python将字典中的数据保存到文件中
d = {'a':'aaa','b':'bbb'}s = str(d)f = open('dict.txt','w')f.writelines(s)f.close()
android中Actionbar详解
1.什么是Action BarAction Bar被认为是新版Android系统中最重要的交互元素,在程序运行中一直置于顶部,主要起到的作用在于:1)突出显示一些重要操作(如“最新”.“搜索”等)2) ...

day72 Ajax 第一天