什么是网站和网页,广州市网站建设科技公司,网站建设教程高清视频,网站及其建设的心得体会一、 基本内容 定义#xff1a;AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”#xff0c;即使用Javascript语言与服务器进行异步交互#xff0c;传输的数据为XML(当然#xff0c;传输的数据不只是XML) 作用#xff1a;AJAX就是使用 js 技… 一、 基本内容 定义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, safeFalse) {# 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 } } }); 如何构建 MVCampsemi;AJaxampsemi;JSon示例 背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ... 如何构建ASPperiod;NET MVC4ampsemi;JQueryampsemi;AJaxampsemi;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:删除标记,以便删边之用 如果对于一个最 ... fillowbar;systemlowbar;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? 构建工具是从源代码自动创建可执行应用程序的程序.构建包括将代码编译,链接和打包成可用或可执行的形式.在小项目中,开发人员通常会手动调用构建过程.这对于较大的项目来说是 ...
