Ajax 的基本使用
程序员文章站
2022-03-21 17:33:31
Ajax简介 一门异步的加载技术,局部刷新 异步加载,可以在不重载整个网页的前提下,进行局部刷新 分为原生和JQ两种 JSON数据格式 Json对象转字符串: JSON.stringify() 字符串转Json对象:JSON.parse() 前后端数据交互 html文件 py文件 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()