Ajax 的基本使用
Ajax简介
- 一门异步的加载技术,局部刷新
- 异步加载,可以在不重载整个网页的前提下,进行局部刷新
- 分为原生和JQ两种
JSON数据格式
- Json对象转字符串: JSON.stringify()
- 字符串转Json对象:JSON.parse()
<script type="text/javascript">
var obj = {"name": "JiYu", "age": "99"};
//json数据 可读可写
console.log(obj);
console.log(typeof obj);
console.log(obj.name);
obj.name = "NianHua";
console.log(obj);
// json遍历
for (var key in obj) {
console.log(key + ":" + obj[key])
}
// json对象转字符串
var obj_string = JSON.stringify(obj);
console.log(obj_string);
console.log(typeof obj_string);
// 字符串对象转json:键值对的引号必须是双引号
var obj_json = JSON.parse(obj_string);
console.log(obj_json);
console.log(typeof obj_json);
</script>
前后端数据交互
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前后端数据交互</title>
</head>
<body>
<form action="/" method="post">
用户名:<input type="text" placeholder="请输入用户名" name="user"><br>
密 码:<input type="password" placeholder="请输入密码" name="pwd"><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>
- py文件
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("Demo.html")
def post(self):
user = self.get_argument("user")
pwd = self.get_arguments("pwd")
print("用户名:",user)
print("密码:",pwd)
if __name__ == "__main__":
# 路由
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
Ajax局部刷新
- 导入jquery
- 使用方式
- $.ajax({...})
- $.get({...})
- $.post({...})
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax局部刷新</title>
</head>
<body>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c"><br>
<button id="btn">计算</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 获取元素
var inp = $("input");
var btn = $("#btn");
btn.click(function () {
// 获取元素值
var a = inp.eq(0).val();
var b = inp.eq(1).val();
// 方法一:ajax
$.ajax({
//get、post不用写type
'type': 'post',
// 提交的地址
'url': '/',
// 传给后台的数据
'data': {
'aaa': a,
'bbb': b
},
// 成功之后的回调函数
'success': function (data1) {
res = data1['result'];
inp.eq(2).val(res);
}
})
// 方法二:get
// $.get({});
// 方法三:post
// $.post({});
})
</script>
</body>
</html>
- py文件
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("Demo.html")
def post(self):
# 根据键取前台传来的值
a = int(self.get_argument('aaa'))
b = int(self.get_argument('bbb'))
result = a + b
return_data = {'result':result}
# 返回数据
self.write(return_data)
if __name__ == "__main__":
# 路由
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
Ajax 的基本使用的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
随机推荐
- 【NHOI2018】黑格覆盖
[题目描述] 在一张由 M * N 个小正方形格子组成的矩形纸张上,有 k 个格子被涂成了黑色.给你一张由 m * n 个同样小正方形组成的矩形卡片,请问该卡片最多能一次性覆盖多少个黑格子? [输入数 ...
- 在Spring Security框架下JWT的实现细节原理
一.回顾JWT的授权及鉴权流程 在笔者的上一篇文章中,已经为大家介绍了JWT以及其结构及使用方法.其授权与鉴权流程浓缩为以下两句话 授权:使用可信用户信息(用户名密码.短信登录)换取带有签名的JWT令 ...
- Knative Serverless 之道:如何 0 运维、低成本实现应用托管?
作者 | 牛秋霖(冬岛) 阿里云容器平台技术专家 关注"阿里巴巴云原生"公众号,回复关键词"1205"即可观看 Knative-Demo 演示视频. 导读:S ...
- 【JMX】jmx结合jmx_exporter实现promethues监控
JMX JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理.监控正在运行中的Java程序.常用于管理线程,内存,日志Lev ...
- PAT(甲级)2019年秋季考试
第一题用搜索,超时了,待补 更新第一题思路 dfs + 剪枝,首先确定 n的最后一位数字肯定是9,为什么呢,因为 任意两个相邻的数肯定互为质数(gcd=1),所以 n 的末尾肯定是9,这样n+1产生的 ...
- java基础(3)--详解String
java基础(3)--详解String 其实与八大基本数据类型一样,String也是我们日常中使用非常频繁的对象,但知其然更要知其所以然,现在就去阅读源码深入了解一下String类对象,并解决一些我由 ...
- 本地Docker Jenkins构建dotnet core web应用到Linux服务器 Docker上
1.准备工作 环境 本地: Windows.Docker 代码仓库:Git 服务器:Linux.Docker 前提准备 创建个有dockerfile文件的dotnet core 3 web项目 新建一 ...
- 配置aria2
Mac 用户肯定都受够了百度网盘在自己电脑上的糟糕体验,至少我是如此:安装官方的 App,经常下载时中断,有时甚至 Bug 般连续中断,无奈使用浏览器下载,速度却是令人挠头.花点时间来配置 aria2 ...
- JavaScript的DOM对象和jQuery对象的对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MySQL必知必会(Select)
SELECT prod_name FROM products; SELECT prod_id, prod_name, prod_price FROM products; SELECT * FROM p ...