ajax示例
ajax（Asynchronous Javascript And XML）翻译成中文就是异步的javascript和XML,即用javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）
ajax不是新的变成语言，而是一种使用现有标准的方法
ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容（这一特点给用户的感受是在不知不觉中完成请求和响应的过程）
ajax不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
ajax常见应用情景
搜索引擎根据用户输入的关键字，自动提示检索关键字
注册时候用户名查重
当文本框发生了输入变化时，使用ajax技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果显示出来
整个过程页面没有刷新，只是刷新页面中的局部位置而已
当请求发出后，浏览器还可以进行其他操作，无需等待服务器响应
下面是用jquery实现的ajax的demo
ajax_demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></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>
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) views.py
urls.py
urlpatterns = [
...
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
...
]
ajax示例的更多相关文章
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- Comet ASP.NET AJAX 示例
最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...
- jQuery的$.ajax示例
$.ajax({ url: 'index.php?module=products&submod=product_experience_manage&method=ajaxGetSele ...
- Ajax得知（两）—— 一个简单的Ajax示例
通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- 小程序 wx.request ajax示例
简单示例 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html wx.request({ method: ...
- 一个简单的AJAX示例(转)
转载自:http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html,为了防备面试,备份一份吧!! 虽然现在有了框架,许多AJAX ...
- 使用Javascript实现ajax示例
使用原始的javascript实现ajax <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
随机推荐
- bootstrap基础学习二篇
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...
- linux使用常见问题
出现RTNETLINK answers: File exists 同时出现connect:network is unreachable 和 Determining IP information for ...
- StepVR插件容易出现的坑------项目设置一定要勾选Start in VR或者在exe快捷方式中添加-vr参数
- 二、Android Studio使用——导入jar包，运行、debug都不是问题
[新建AndroidStudio工程,lib导入jar包] 我们的项目代码都在app里面,可以看作是一个Model. src 下面除了我们的代码之外,还有单元测试. 把JAR复制到libs文件 ...
- 关于PostgreSQL的SQL注入必知必会
一.postgresql简介 postgresql是一款关系型数据库,广泛应用在web编程当中,由于其语法与MySQL不尽相同,所以其SQL注入又自成一派. 二.postgresql的SQL注入:(注 ...
- 【BZOJ2423】[HAOI2010]最长公共子序列 DP
[BZOJ2423][HAOI2010]最长公共子序列 Description 字符序列的子序列是指从给定字符序列中随意地(不一定连续)去掉若干个字符(可能一个也不去掉)后所形成的字符序列.令给定的字 ...
- 深度解析Objective-C笔试题
2011-08-11 17:39 佚名 互联网 字号:T | T 本文介绍的是Objective-C笔试题,先来问一个,为什么很多内置类如UITableViewController的delegate属 ...
- android EditText自动弹出和自动关闭软键盘
程序进入某个activity直接弹出软键盘,不能直接在OnCreate中设置,必须等View绘制事件完毕才可以弹出,需要用到Timer辅助实现,如果要实现输入的功能,必须让EditText获得焦点. ...
- js/vue 高德地图绘制驾车路线图
地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...
- 160608、mysql距离函数st_distance
随着近几年各类移动终端的迅速普及,在手机移动定位app中,附近的人,附近的地点功能十分常见,基于地理位置的服务(LBS)和相关应用也越来越多,而支撑这些应用的最基础技术之一,就是基于地理位置信息的处理 ...