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"& ...
随机推荐
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
- 要立刷金组flag了T_T
刷了那么多银组,发现自己好多不会啊... 果然太弱 在这感谢hzwer神犇的blog.. 大部分题解都从黄学长这里来orz. orz.... 果然我太水
- 返回flag
//修改前namespace CleanCSharp.Errors.Dirty { public class SomeClass { public int DoSomeProcess(int? id) ...
- iOS自动化测试需求实现（iOS按键精灵类似）
需求分析: 作为以需求为驱动的IT公司,有再奇怪的需求都不奇怪,所以“24小时循测第三方应用”这样的需求也可以接受.业务需求重点为: 1.24小时循测 2.无人值守,自动完成 3.自动界面操作(点击. ...
- WPF 的拖拽操作（DragDrop）
在WPF中似乎没有对拖拽操作进行改变,和以前的方式一样.如果曾近在 Windows 窗体应用程序中使用过鼠标拖放,就会发现在 WPF 中的编程接口实际上没有发生变化.重要的区别是用于拖放操作的方法和事 ...
- iOS Web开发
1.让web页面的输入框是数字键盘 html 中 input 的 type = "tel"
- 7624:山区建小学（划分dp）
7624:山区建小学 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄 ...
- 三 Android Studio打包EgretApp (SDK选择和下载)
一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...
- 【BZOJ2049,2631,3282,1180】LCT模板四连A
好吧我并不想讲LCT 只是贴4个代码~ [BZOJ2049][Sdoi2008]Cave 洞穴勘测 #include <cstdio> #include <cstring> # ...
- ios UITableView高度自适应（转）
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { // ...