第一个示例：（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 代码,总之就是让我们从这 ...

随机推荐

利用redis完成自动补全搜索功能（三）
前面已经完成了分词和自动提示功能,最后把搜索结合在一起,来个完成的案例.当然最好还是用搜索分词解决,这个只是一个临时解决方案. 其实加上搜索很简单,要做的就是3件事 1. 分词的时候,把有用词的id存 ...
源码安装php时出现configure: error: xml2-config not found. Please check your libxml2 installation
1.检查是否安装了libxml 包 > rpm -qa|grep libxml2 2.如果没有则安装 > yum install libxml2 > yum install libx ...
【SQL模板】二.创建表视图模板TSQL
---Name: 创建表视图模板.sql ---Purpose: 用于创建数据库中新的数据表/视图 ---Author: xx ---Time: 2015-12-18 10:26:06 ---Re ...
WARNING [main] org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [] milliseconds.
编译安装tomcat-native和tomcat-deamon以后,发现toomcat启动很慢,好久才有响应.以下日志供参考: 11-Sep-2017 12:19:28.102 INFO [main] ...
全基因组测序从头测序(de novo sequencing) 重测序(re-sequencing)
全基因组测序全基因组测序分为从头测序(de novo sequencing)和重测序(re-sequencing). 从头测序(de novo)不需要任何参考基因组信息即可对某个物种的基因组进行测序 ...
[Usaco2009 Dec]Toll 过路费
题面: 跟所有人一样,农夫约翰以着宁教我负天下牛,休教天下牛负我(原文:宁我负人,休教人负我)的伟大精神,日日夜夜苦思生财之道.为了发财,他设置了一系列的规章制度,使得任何一只奶牛在农场中的道路行走, ...
[Fiddler] 开启Fiddler抓包的时候产品报“证书错误”
报错截图: 解决办法:同时开启产品和Fiddler,做如下处理:
/etc/inittab加入自动启动格式
R01:35:respawn:/usr/bin/exe_program 说明 R01:标识,每一行必须唯一(R01并无特殊含义,可自定义). 35:有效模式,3字符界面启动,5图形界面启动 respa ...
const当做标记的函数重载，但是仅仅是限于类里面的成员函数
(1)我们知道函数的重载时根据函数的参数类型以及函数参数个数来重载的,不能用函数返回值来重载函数.但是有时候函数参数个数和函数参数类型重载函数会和默认参数发生冲突: int fun(int i,cha ...
2018.10.22 bzoj1742: Grazing on the Run 边跑边吃草（区间dp）
传送门区间dp入门题. 可以想到当前吃掉的草一定是一个区间(因为经过的草一定会吃掉). 然后最后一定会停在左端点或者右端点. f[i][j][0/1]f[i][j][0/1]f[i][j][0/1] ...

day72 Ajax 第一天