day72 Ajax 第一天

最新推荐文章于 2025-09-10 20:18:23 发布
最新推荐文章于 2025-09-10 20:18:23 发布
阅读量95 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json python javascript ViewUI
原文链接：http://www.cnblogs.com/mengbin0546/p/9065575.html
本文详细介绍Ajax的基础概念及其实现方式，包括如何利用Ajax进行前后端数据交换，并提供了具体的前端HTML与后端Django实现示例。同时，文章还介绍了序列化知识以及如何处理日期时间类型的数据。

 

第一个示例：（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()[0:10]
    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")
          }
        }
      })
    });
})
复制代码

 

转载于:https://www.cnblogs.com/mengbin0546/p/9065575.html

Day05:第五天
03-13
在JavaScript这个广泛的编程领域中，"Day05:第五天"可能是指一系列学习或培训计划中的第五个主题日。在这个阶段，我们很可能会深入探讨JavaScript的一些核心概念和技术。JavaScript是一种广泛应用于网页和互联网应用...
Day18:第18天
03-28
理解这些是学习JavaScript的第一步。 2. **控制结构**：条件语句（if...else, switch）和循环（for, while, do...while）是程序流程控制的关键。它们使得代码可以根据不同的条件执行不同的任务或重复执行某些操作。...
AJAX
weixin_30783629的博客
04-07 348
AJAX准备知识：JSON 什么是 JSON ？ JSON 指的是 JavaScript 对象表示法（JavaScriptObjectNotation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言* JSON 具有自我描述性，更易理解 *JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 J...
Python--day72--ajax简介
weixin_34126215的博客
04-10 114
ajax的基本结构： 1 <script> 2 $("#b1").on("click", function () { 3 $.ajax({ 4 url: "/ajax_add/", 5 type: "GET", 6 data: {"name": "xiaohei", "age":18}, 7 ...
ajax 发送请求无法重定向
热门推荐
qq_30306577的博客
05-11 1万+
ajax 是默认就是不支持重定向的，它是局部刷新，不重新加载页面。
3.24 day36 Ajax 第一天
weixin_45190461的博客
03-24 182
Ajax
ajax学习第五天
凌歆的博客
03-09 196
ajax学习第五天 文章目录ajax学习第五天1.HTTP协议1.1 通信1.2 互联网中的通信2.HTTP请求消息2.1 请求消息的组成部分2.2 请求行2.3 请求头部2.4 空行2.5 请求体3. HTTP 响应消息3.1 状态行3.2 响应头部3.3 空行3.4 响应体4.HTTP请求方法5. 响应状态码5.1 响应码的分类 1.HTTP协议 1.1 通信 信息的传递和交换 通信的三要素 通信的主体 通信的内容 通信的方式 1.2 互联网中的通信 通信主体：服务器和客户端浏览器 通
day01 AJAX
weixin_56395673的博客
05-07 151
5月6日 今天是学习AJAX的第一天，今天主要学习和回顾了之前学习的接口和运用，还有关于http的请求与响应，AJAX的大致理论。 什么是http协议，又称超文本传输协议，规定了客户端的请求以及服务器端 的响应 http的请求过程 1.游览器输入服务器端IP地址 +域名/端口号 2.游览器和服务器建立关系（三次握手） 3.游览器发送请求消息 ...
ajax学习第二天
凌歆的博客
03-06 771
ajax学习第二天 文章目录ajax学习第二天1.form表单1.1target属性说明_blank 示例1.2 method属性说明get示例post 示例1.3 enctype 属性说明1.4 action属性说明1.5 表单的同步提交2. ajax提交表单数据2.1 监听表单提交示例2.2 阻止表单默认提交行为示例2.3 通过serialize（）函数获取表单所有数据3. 一个案例3.1 bs3框架的一些知识点一个发表评论案例4. 模板引擎5.art-template模板引擎5.1 有无引擎的对比5.
day 72 Django基础七之Ajax
deng6648的博客
05-26 246
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与Jsonp 七 xxx 八 xxx 一 Ajax简介 　　1.简介 　　...
ajax第一天(ajax编程核心概念，XMLHttpRequest)
qf优快云的博客
11-29 305
一.HTTP：HTTP协议 HTTP（HyperText Transfer Protocol，超文本传输协议）：HTTP协议就规范了客户端如何向服务器发送请求，以及服务器如何响应数据到客户端 一般现在称 HTTP 为端与端之间的通讯协议。 1-约定内容-重点 请求 / 响应报文格式 请求方式 —— GET(查询) / POST(增加) / PUT(修改) / DELETE(删除) / OPTION(询问)… 响应状态 —— 200 / 404 / 302 / 304 … 预设的请求 / 响应头 2-
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
达内开发学习笔记：纯手打无添加的AJAX入门第一天
- AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - AJAX的核心是JavaScript的XMLHttpRequest对象，用于浏览器与服务器之间的...
cJson系列——json数据结构分析
最新发布
qq_39642740的博客
09-10 611
JSON是一种轻量级数据交换格式，由对象和数组两种基本结构组成，支持字符串、数字、布尔值、空值、对象和数组六种数据类型。对象使用{}表示键值对，数组用[]表示有序集合。JSON具有简洁易读、跨平台等优点，但不支持注释、数据类型有限。广泛应用于Web API、数据存储等领域，是跨平台数据交换的理想选择。
【Vue3】02-Vue3工程目录分析
qq_52161797的博客
09-08 906
本文介绍了Vue3工程目录结构及关键文件作用。主要内容包括：1).vscode/extensions.json配置VS Code插件推荐；2)public目录存放静态资源；3)src目录存放主要开发文件；4)env.d.ts解决TS文件类型识别问题及常见依赖错误处理；5)index.html作为项目入口文件；6)package.json管理项目依赖；7)tsconfig相关文件配置TypeScript。文章还提供了项目运行方法(npm run dev)和常见权限问题的解决方案，帮助开发者快速理解和上手Vue
常用注解：@PostMapping、@RequestBody、@Autowired、@Service、@Mapper
2401_83708850的博客
09-10 209
Batis 的 Mapper 接口，MyBatis 会为其创建代理实现。作用：将 HTTP 请求体（JSON/XML）转换为 Java 对象。作用：标记业务逻辑层，Spring 会将其注册为 Bean。作用：将方法绑定到 HTTP POST 请求的特定路径上。作用：自动注入依赖对象（Spring 的依赖注入）
swagger接口文档规范化(苍穹外卖)
weixin_75170714的博客
09-06 946
本文介绍了Swagger接口文档的规范化配置方法。通过修改WebMvcConfiguration.java文件，将接口文档分为管理端和用户端两个部分：1) 管理端文档扫描com.sky.controller.admin包，2) 用户端文档扫描com.sky.controller.user包。配置完成后，访问http://localhost:8080/doc.html即可查看规范化后的接口文档。该方案实现了接口分类管理，便于开发者快速定位不同业务模块的API文档。
vue中 TS配置，vite配置，eslint配置的技术沉淀
魏晋-
09-08 296
在现代 Vue 项目开发中，TypeScript、Vite 和 ESLint 已成为提升开发效率与代码质量的三大利器。本文将系统总结这三者的配置实践，包括基础设置、协同工作方式及最佳实践，帮助团队构建规范、高效的开发环境。
vue3+TS项目配置Eslint+prettier+husky语法校验
qq_44423029的博客
09-10 126
本文配置了Eslint+prettier+husky。其中ESLint 负责代码质量检查，Prettier 负责代码格式统一，Husky 通过 Git 钩子在提交时自动执行检查与格式化，三者结合确保代码规范、风格一致且无低级错误。
JavaWeb视频教程第23天：深入AJAX技术
由于没有具体的视频内容描述，我们只能从文件名“JavaWeb视频教程_day23_ajax”来推断，这一天的课程主题可能是关于Ajax（异步JavaScript和XML）技术的使用。Ajax是一种广泛应用于Web开发中的技术，它允许Web页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值