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示例的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. Comet ASP.NET AJAX 示例

    最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...

  5. jQuery的$.ajax示例

    $.ajax({ url: 'index.php?module=products&submod=product_experience_manage&method=ajaxGetSele ...

  6. Ajax得知(两)—— 一个简单的Ajax示例

    通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  7. 小程序 wx.request ajax示例

    简单示例 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html wx.request({ method: ...

  8. 一个简单的AJAX示例(转)

    转载自:http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html,为了防备面试,备份一份吧!! 虽然现在有了框架,许多AJAX ...

  9. 使用Javascript实现ajax示例

    使用原始的javascript实现ajax <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

随机推荐

  1. 基于SSH框架实际开发时遇到的问题及解决办法

    1. 发现通过注解注入bean不起作用(对应的.java文件上没有'S'标记) 需要在pring .xml配置文件中加 <!-- 使用自动注解就必须配置加入自动扫描加载容器的包 --> & ...

  2. hdu 1503:Advanced Fruits(动态规划 DP & 最长公共子序列(LCS)问题升级版)

    Advanced Fruits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. 在dropDownList中实现既能输入一个新值又能实现下拉选的代码

    aspx: <div id="selDiv" style=" z-index:100; visibility:visible; clip:rect(0px 110p ...

  4. hdu 1520(简单树形dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:dp[u][0]表示不取u的最大价值,dp[u][1]表示取u的最大价值,于是有dp[u] ...

  5. WPF Expander控件(扩展面板)

    这算是我比较喜欢的一个控件,以前在Winform中也常用类似的.它包装了一块内容,通过单击一个小箭头按钮可以显示或隐藏所包含的内容.在线帮助以及Web页面经常使用这种技术,因为既可以包含大量内容,而又 ...

  6. myForm.js

    根据控件名,重现一些特殊的表单项,生成html var can_submit = true; function myForm($form_id, $id_value, province, city, ...

  7. Docker(1)在CentOS上的安装与卸载

     一. Docker的安装 CentOS7 上安装: 1. 卸载旧版本 $ sudo yum remove docker \ docker-client \ docker-client-latest ...

  8. 时序数据库技术体系 – InfluxDB TSM存储引擎之TSMFile

    本文转自 http://hbasefly.com/2018/01/13/timeseries-database-4/ 为了更加系统的对时序数据库技术进行全方位解读,笔者打算再写一个系列专题(嘿嘿,好像 ...

  9. Map<String, String>的数据处理以及ListView的适配器

    Map<String, String> map = new HashMap<String, String>(); map.put("key1", " ...

  10. Vscode 调试 C 语言时数组值无法显示的问题

    使用 Vscode 的 Gdb 扩展调试 C 语言时,发现数组变量在 变量列表里面中显示为指针,且只显示为其第一个元素的值,无法看到所有元素的值. 如图所示: 解决: 假设有一个元素个数为10的数组v ...