ajax demo示例,AJAX小示例

一、 基本内容

定义：AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”，即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)

作用：AJAX就是使用 js 技术发送请求和接收响应

优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

特点：

异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

局部刷新，无须刷新整个页面

传输的数据量少，性能高

应用场景：

搜索引擎根据用户输入的关键字，自动提示检索关键字

注册时候的用户名的查重

普通示例：页面输入两个整数，通过AJAX传输到后端计算出结果并返回

# urls.py

urlpatterns = [

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

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

]

# views.py

def ajax_demo1(request):

return render(request, "ajax_demo1.html")

def ajax_add(request):

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

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

ret = i1 + i2

return JsonResponse(ret, safe=False)

{# ajax_demo1.html #}

+

=

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

$.ajax({

url:"/ajax_add/",

type:"GET",

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

success:function (data) {

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

},

error:function (error) {

console.log(error)

},

})

})

二、 jQuery实现的AJAX

最基本的jQuery发送AJAX请求示例

# views.py

def ajax_test(request):

user_name = request.POST.get("username")

password = request.POST.get("password")

print(user_name, password)

return HttpResponse("OK")

AJAX 测试

$("#ajaxTest").click(function () {

$.ajax({

url: "/ajax_test/",

type: "POST",

data: {username: "Q1mi", password: 123456},

success: function (data) {

alert(data)

}

})

})

$.ajax参数

data参数中的键值对，如果值不为字符串，需要将其转换成字符串类型

三、 AJAX通过csrf的校验

前提条件：确保有csrftoken的cookie

在页面中使用{% csrf_token %}

加装饰器：ensure_csrf_cookie

注意：

如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie

AJAX请求如何设置csrf_token

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送

$.ajax({

url: "/cookie_ajax/",

type: "POST",

data: {

"username": "Q1mi",

"password": 123456,

{# 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 #}

"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()

},

success: function (data) {

console.log(data);

}

})

通过获取返回的cookie中的字符串，放置在请求头中发送

注意：需要引入一个jquery.cookie.js插件

$.ajax({

url: "/cookie_ajax/",

type: "POST",

{# 从Cookie取csrftoken，并设置到请求头中 #}

headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},

data: {"username": "Q1mi", "password": 123456},

success: function (data) {

console.log(data);

}

})

使用文件：自己写一个getCookie方法

粘贴在 static 下的 js 中的 一个js文件 ，比如：ajax_setup.js

function getCookie(name) {

var cookieValue = null;

if (document.cookie && document.cookie !== '') {

var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {

var cookie = jQuery.trim(cookies[i]);

if (cookie.substring(0, name.length + 1) === (name + '=')) {

cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

break;

}

}

}

return cookieValue;

}

// 通过js获取csrftoken的值

var csrftoken = getCookie('csrftoken');

// 使用$.ajaxSetup()方法为ajax请求统一设置

function csrfSafeMethod(method) {

return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

$.ajaxSetup({

beforeSend: function (xhr, settings) {

// 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话，就执行if后的操作

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X-CSRFToken", csrftoken); // 设置请求头，本质同方法2

}

}

});

如何构建 MVC&amp&semi;AJax&amp&semi;JSon示例

背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ...

如何构建ASP&period;NET MVC4&amp&semi;JQuery&amp&semi;AJax&amp&semi;JSon示例

背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

ReactNative新手学习之路06滚动更新ListView数据的小示例

本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

MVC客户端验证的小示例

MVC客户端验证的小示例 配置客户端验证的可用性:         ...

POJ 1679 The Unique MST --Kruskal应用

这题可以用次小生成树解,这里用Kruskal算法来做.每条边除维护u,v,w外,还维护: used:表示这条边是否加过 eq:表示有没有与这条边相等的边 del:删除标记,以便删边之用 如果对于一个最 ...

fil&lowbar;system&lowbar;struct

/** The tablespace memory cache */ typedef struct fil_system_struct fil_system_t; /** The tablespace ...

JVM学习之Eclipse输出GC日志

Java应用启动时,可以通过设置verbose参数来输出JVM的gc情况,命令如下:-verbose:gc或者-XX:+PrintGC在Eclipse中可以通过Run As|Run Configura ...

PostgreSQL启动main函数都干了什么&lpar;一&rpar;

DB Version:9.5.3 环境:CentOS7.x 调试工具:GDB source:src/backend/main/main.c 56 /* 57 * Any Postgres server ...

python 模块 SQLalchemy

SQLalchemy 概述: # &&&&&&&&&&&&&&&&&am ...

Spring Boot如何使用Runner实现启动时调用？用法和原理都在这里

在日常的项目开发中经常会遇到这样的需求:项目启动的时候进行一些一次性的初始化工作,如读取加载资源文件.或者执行其它外部程序. 这个时候我们就可以用到spring-boot为我们提供的一种扩展机制--R ...

构建工具 buildtool

一.什么是build tool? 构建工具是从源代码自动创建可执行应用程序的程序.构建包括将代码编译,链接和打包成可用或可执行的形式.在小项目中,开发人员通常会手动调用构建过程.这对于较大的项目来说是 ...