day72 Ajax 第一天

时间：2022-09-23 00:22:14

第一个示例：（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)

　　

day72 Ajax 第一天

 第二个示例（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视图

day72 Ajax 第一天

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请求

]

 三、部分序列化知识

day72 Ajax 第一天

day72 Ajax 第一天

day72 Ajax 第一天

day72 Ajax 第一天

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

一、什么是ajax ?

1.什么是json  

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

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

json独立于语言    

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

day72 Ajax 第一天

day72 Ajax 第一天

day72 Ajax 第一天

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)

四、输出结果

day72 Ajax 第一天

五、访问网页

day72 Ajax 第一天

三、Ajax 发送post请求

day72 Ajax 第一天

<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);

            }

        })

    })

day72 Ajax 第一天

day72 Ajax 第一天

 四、序列化 

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 第一天

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

  1. &lbrack;妙味Ajax&rsqb;第一课：原理和封装

    知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...

  2. Ajax第一天——入门与基本概念

    什么是Ajax Ajax被认为是(Asynchronous JavaScript and XML的缩写).异步的js和xml 异步和同步:同步->类似打电话,接完一个再接下一个:异步:-> ...

  3. ajax第一天总结

    AJAX开发步骤 步一:创建AJAX异步对象,例如:createAJAX() 步二:准备发送异步请求,例如:ajax.open(method,url) 步三:如果是POST请求的话,一定要设置AJAX ...

  4. ajax 第一个程序

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Ajax第一课

    <script language="javascript"></script> Javascript 函数创建     function 函数名(){    ...

  6. springmvc&plus;ajax——第一讲（搭建）

    下面是整个整合测试的代码: ajax01.html TestController web.xml springmvc.xml applicationContext.xml <!DOCTYPE h ...

  7. 【JavaScript】--ajax

    1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  8. 四步完成ajax的使用

    什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp ...

  9. ajax 基础教程

    这是一本什么书?这是一本技术类的书籍,主要从历史.XMLHttpRequest对象.怎么样于服务器交互.构建完备的Ajax开发工具箱.使用jsUnit测试javascript 代码,总之就是让我们从这 ...

随机推荐

  1. ICommand相关知识

    一般来说,如果类的后缀是Command,则用OnClick方法:如果是Tool,则设置Map的CurrentTool属性为该工具

  2. Eclipse &ast;版本

    关于Eclipse的版本介绍, Eclipse Standard 该版本是eclipse最基础的版本,适合Java se个人开发者.或希望根据自己需求配置插件的开发者使用. Eclipse IDE f ...

  3. &lpar;转&rpar;HTML文档头部信息

    原文:http://www.cnblogs.com/sunyunh/archive/2012/07/25/2609199.html HTML(3)HTML文档头部信息   <!DOCTYPE h ...

  4. 【qt4&period;8&period;6】qt-everywhere-opensource-src-4&period;8&period;6静态库编译，搭建vs2010 &plus; Qt4&period;8&period;6环境

    公司的电脑上无法运行QtCreator, 又想用Qt,只能搞vs2010+Qt了, 看到运行时要链接一个几M到十几M的QtCore.dll和QtGui.dll,又有一种在用C#写的程序的感觉,很不爽, ...

  5. magento产品批量导出导入

    magento产品批量导出导入 博客分类: WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra ExcelMobile配置管理XML ...

  6. &num;&num;&num; 七种SQL JOINS

    七种SQL JOINS 1.SELECT FROM TABLEA A LEFT JOIN TABLEB B ON A.Key=B.Key 2.SELECT FROM TABLEA A RIGHT JO ...

  7. bug&colon;未考虑实际使用场景

    最近bug比较多,汗颜. 1.需求背景 (1)app活动页面,用户参与并完成能够以1分钱价格购买指定商品(2)这个页面可分享至app以外的渠道,如微信.QQ等 2.这个bug的表现形式:用户在第三方渠 ...

  8. &lbrack;Bzoj 2547&rsqb; &lbrack;Ctsc2002&rsqb; 玩具兵

    2547: [Ctsc2002]玩具兵 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 317  Solved: 152[Submit][Status] ...

  9. 程序员如何巧用Excel提高工作效率

    作为一名程序员,我们可能很少使用Excel,但是公司的一些职能部门,比如HR,财务等,使用Excel真的是太熟练了,以至于一些系统开发出来,导入和导出功能是使用最频繁的,哈哈. 其实在程序开发的过程中 ...

  10. foreach 语句

    foreach  语句很适合用来枚举   如数组.列表.集合之类的数据结构中的元素.  不必准确知道元素个数.如果基数据不包含任何元素,则foreach循环不执行 foreach(<元素> ...

相关文章