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"& ...
随机推荐
- 【BZOJ】1031: [JSOI2007]字符加密Cipher(后缀数组)
http://www.lydsy.com/JudgeOnline/problem.php?id=1031 很容易想到这就是将字符串复制到自己末尾然后后缀数组搞出sa然后按区间输出即可. 然后换了下模板 ...
- DWZ(二):经常使用组件了解
上篇博客中我们大致明确了DWZ框架.以及它的一些优势,接下来的这篇博客是具体介绍了DWZ框架中一些经常使用组件的使用. 经常使用组件列表: Ajax 链接扩展 ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- 分页技巧__在项目中使用QueryHelper辅助对象实现分页效果
分页技巧__在项目中使用QueryHelper辅助对象实现分页效果 QueryHelper 用于辅助拼接HQL语句 addCondition("t.type=?", "精 ...
- 判断uiscrollView滑到底部
本文转载至 http://blog.csdn.net/cerastes/article/details/39612177 -(void)scrollViewDidScroll:(UIScrollVi ...
- iOS开发经验总结(一)
本文转载至 :http://dreamahui.iteye.com/blog/1878650 软件开发方面 1. 在每个页面的入口和出口(一般是viewDidLoad和dealloc)打上日志,可以 ...
- 《C++ Primer Plus》第2章 开始学习C++ 学习笔记
C++程序由一个或多个被称为函数的模块组成.程序从main()函数(全部小写)开始执行,因此该函数必不可少.函数由函数头和函数体组成.函数头指出函数的返回值(如果有的话)的类型和函数期望通过参数传递给 ...
- [NOIP2017]列队 离线+SBT
[NOIP2017]列队 题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n×m名学生,方阵 ...
- kafka服务器搭建与测试
kafka服务器搭建 kafka自身集群信息的管理以及对producer和consumer的信息管理是通过zookeeper实现的,zookeepr是kafka不可分割的一部分,所以搭建zookeep ...
- git+sourcetree创建仓库
1.git上创建版本库 2.安装sourcetree 3.创建空目录 我本地空目录为D:/shenghuojia 4.打开sourcetree,点击clone/new ,选择clone reposit ...