AJAX 局部刷新实例：

使用 jQuery 实现基本的发送 AJAX 请求

index.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> ajax 局部刷新实例 </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 () {

    $.ajax({

      url:"/ajax_add/",

      type:"GET",

      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},

      success:function (data) {

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

      }

    })

  })

</script>

</body>

</html>

urls.py：

from django.conf.urls import url

from app01 import views

urlpatterns = [

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

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

]

views.py：

from django.shortcuts import render, HttpResponse

def index(request):

    return render(request, "index.html")

def ajax_add(request):

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

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

    ret = int(num1) + int(num2)

    return HttpResponse(ret)

访问，http://127.0.0.1:8000/index/

输入两组数，点击 “AJAX提交”，页面没有刷新也会计算出结果

上例 AJAX 代码解析：

<button id="b1">AJAX 测试</button>

<script>

  $("#b1").click(function () {  # 如果 id 为 b1 的按钮被点击

    $.ajax({

      url: "/ajax_add/",   # ajax 数据请求的 URL

      type: "GET",         # 请求的方式

      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},  # 要发送的数据

      success: function (data) {   # 如果请求被正常处理就执行该函数

        $("#i3").val(data);  # 把从后端返回的数据填到 i3 中

      }

    })

  })

</script>

Ajax 实现 url 跳转：

index.html：

<button id="b2">跳转</button>

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

<script>

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

        $.ajax({

            url: "/ajax_test/",

            type: "GET",

            success: function (url) {

                location.href = url;  # url 跳转

            }

        })

    })

</script>

views.py：

from django.shortcuts import render, HttpResponse

def ajax_test(request):

    return HttpResponse("https://www.cnblogs.com/sch01ar/")

访问，http://127.0.0.1:8000/index/

点击“跳转”，就会跳转到博客园 https://www.cnblogs.com/sch01ar/

Ajax 显示图片：

index.html：

<button id="b3">显示图片</button>

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

<script>

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

        $.ajax({

            url: "/ajax_test/",

            type: "GET",

            success: function (img_url) {

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

                imgEle.src = img_url;

                $("#b3").after(imgEle);

            }

        })

    })

</script>

views.py：

from django.shortcuts import render, HttpResponse

def ajax_test(request):

    img_url = "https://www.cnblogs.com/sch01ar/0.jpg"

    return HttpResponse(img_url)

访问，http://127.0.0.1:8000/index/

点击 “显示图片”

Python - Django - jQuery 实现简单的 AJAX的更多相关文章

  1. RSA算法在Python Django中的简单应用

    说明 RSA算法是当今使用最广泛,安全度最高的加密算法. • RSA算法的安全性理论基础 [引]根据百科介绍,对极大整数做因数分解的难度决定了RSA算法的可靠性.换言之,对一极大整数做因数分解愈困难, ...

  2. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  3. python + django + dwebsocket 实现简单的聊天室

    使用库dwebsocket,具体参考此处 views.py: from dwebsocket.decorators import accept_websocket,require_websocket ...

  4. jquery实现简单的ajax

    -->html页 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. python Django之Ajax

    python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...

  6. python django初识ajax

    什么是json json是轻量级文本数据交互格式 json独立语言 符合的json对象 ["one", "two", "three"] { ...

  7. python Django 学习笔记（二）—— 一个简单的网页

    1,创建一个django项目 使用django-admin.py startproject MyDjangoSite 参考这里 2,建立视图 from django.http import HttpR ...

  8. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  9. Python django实现简单的邮件系统发送邮件功能

    Python django实现简单的邮件系统发送邮件功能 本文实例讲述了Python django实现简单的邮件系统发送邮件功能. django邮件系统 Django发送邮件官方中文文档 总结如下: ...

随机推荐

  1. 数据库系统load飙高问题解决思路（转）

    工作过程中有时候会接收到数据库服务器器load 飙高的报警,比如:  load1 15.25 base: 8.52,collect time:2014-08-30 如何处理load 异常飙高的报警呢? ...

  2. iOS 测试在应用发布前后的痛点探索以及解决方案

    作者-芈 峮 前言 iOS 开发从 2010 年开始在国内不断地升温,开发和测试相关的问题不绝于耳.iOS 测试主要涉及哪些内容?又有哪些挑战呢?带着疑问我们开始第一个大问题的讨论. iOS 测试的范 ...

  3. asp.net 访问局域网共享文件

    最近有个项目ASP.NET的项目,要读写一个局域网里的共享文件夹上的文件,记录如下: 1.访问共享文件 在这里我定义了一个方法,SaveFileExist(filesrc,filename),这个方法 ...

  4. python list 字符串排序

    #coding:utf-8 import re s = ['dat2','dat10','dat5'] #方法一 new = sorted(s,key = lambda i:int(re.search ...

  5. 实用Golang库

    框架: 1. Golang轻量级并发服务器框架: zinx / https://www.jianshu.com/p/23d07c0a28e52. 国内谢大牛模仿django制作的重框架: beego3 ...

  6. 关于git clone远程仓库账户密码错误的问题

    这两天刚使用coding和git,但是在我第一次克隆coding上的项目的时候,提示输入账户和密码,当时我不知道这个账户和密码是指的哪个,就随便输入了,然后提示错误,,,,,, 之后每次克隆的时候都提 ...

  7. 题解 LA2889

    题目大意 多组数据,每组数据给出一个正整数 \(n\),输出第 \(n\) 大的回文数(即 \(1,2,3,\cdots\)). 分析 不难发现,\(n\) 位的回文数有 \(9*10^{\lfloo ...

  8. AFL Fuzz安装及完成一次简单的模糊测试

    关于AFL fuzz AFL fuzz是一个模糊测试工具,它封装了一个GCC/CLang编译器,用于对被测代码重新编译的过程中进行插桩.插桩完毕后,AFL fuzz就可以给其编译过的代码输入不同的参数 ...

  9. pkgconfig

    # tree hiredis/ hiredis/└── usr └── local ├── include │   └── hiredis │   ├── adapters │   │   ├── a ...

  10. zabbix server内存突然飙升

    2019年10月16日22:20:58 十点二十突然内存占满,top查询一个httpd进程占了79%,查询httpd.error.log发现 [Wed Oct 16 10:24:57.578643 2 ...