ajax学习----json，前后端交互，ajax

json

<script>var obj = {"name": "xiaopo","age": 18,"gender": "girl"};console.log(obj);console.log(typeof obj);//Object(前端对象)var obj1 = JSON.stringify(obj);//把js对象转换成json字符串console.log(obj1);//{"name":"xiaopo","age":18,"gender":"girl"}console.log(typeof obj1);//string//定义json字符串  直接定义 var obj2 = '{"name": "xiaopo","age": 18,"gender": "girl"}';// var obj1 = JSON.stringify(obj);//把js对象转换成json字符串var obj2 = '{"name": "xiaopo","age": 18,"gender": "girl"}';console.log(obj2);//{"name":"xiaopo","age":18,"gender":"girl"}console.log(typeof obj2);//stringvar obj3 = JSON.parse(obj2);//把json字符串转换成js对象
    console.log(obj3);console.log(typeof obj3);//Object
</script>

前后端交互

　　服务端代码

#! /usr/bin/env python3
# -*- coding: utf-8 -*-import tornado.ioloop
import tornado.web
import tornado.httpserver
from tornado.options import define, options
import os
import randomdefine('port', default=9000, help='run port', type=int)# 主函数
class MainHandler(tornado.web.RequestHandler)://直接输入端口访问的话def get(self):self.write('<h1>hello world 999</h1>')

# form 请求视图
class RegHandler(tornado.web.RequestHandler):def get(self)://form下的get方法提交self.write('Reg的get返回')# # 用户名username = self.get_argument('username')# # 密码password = self.get_argument('password')print('用户名', username, '密码', password)def post(self):# 用户名//form下的post提交(按钮提交)username = self.get_argument('username')# 密码password = self.get_argument('password')# 性别gender = self.get_argument('gender')# 爱好hobby = self.get_arguments('hobby')# 地址address = self.get_arguments('address')# 个人简介personal = self.get_argument('personal')print('用户名', username, '密码', password)print('性别', gender, '爱好', hobby)print('地址', address, '个人简介', personal)# Ajax 请求视图
class AjaxHandler(tornado.web.RequestHandler):# get 请求def get(self):username = self.get_argument('username')password = self.get_argument('password')print('method get username:{} password:{}'.format(username, password))# post 请求def post(self):username = self.get_argument('username')password = self.get_argument('password')# 后台逻辑判断if username and password:print('method post username:{} password:{}'.format(username, password))else:# 如果没有用户名和密码 就返回提示消息self.write('用户名或密码不能为空')# 数据视图
class DataHandler(tornado.web.RequestHandler):def get(self):articles = []for i in range(3):article = {}article['title'] = 'title' + str(random.randint(100, 1000))articles.append(article)# print(articles)self.write({'articles': articles})application = tornado.web.Application(handlers=[(r'/', MainHandler),# reg 路由(r'/reg', RegHandler),# ajax 路由(r'/ajax', AjaxHandler),# 返回数据的路由(r'/data', DataHandler),],# 设置静态路径static_path= os.path.join(os.path.dirname(__file__), "static"),# 设置模板文件# template_path = os.path.join(os.path.dirname(__file__), "template"),# 开启debug模式debug=True
)if __name__ == "__main__":tornado.options.parse_command_line()print('端口是', options.port)http_server = tornado.httpserver.HTTPServer(application)http_server.listen(options.port)tornado.ioloop.IOLoop.instance().start()

form表单代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form</title><style>.form {width: 400px;margin: 20px auto;}.form-item {margin-top: 20px;}label.label-item {display: inline-block;width: 100px;text-align: right;}input[type='radio'], input[type='checkbox'] {vertical-align: -2px;}textarea[name="personal"] {vertical-align: top;}</style>
</head>
<body>
<!--
form两个很重要的属性 name  后台根据name拿值
value  用户输入的值
reg?
user=sdsdsdsd&
password=sdsddsdd&
address=0&
personal=
-->
<form action="/reg" class="form" method="post" enctype="multipart/form-data"><div class="form-item"><label for="username" class="label-item">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"></div><div class="form-item"><label for="password" class="label-item">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"></div><div class="form-item"><label class="label-item">性别：</label><label for="male">男</label><input type="radio" name="gender" value="male" id="male"><label for="female">女</label><input type="radio" name="gender" value="female" id="female"><label for="secret">保密</label><input type="radio" name="gender" value="secret" id="secret"></div><div class="form-item"><label class="label-item">爱好：</label><label for="coding">coding</label><input type="checkbox" name="hobby" value="code" id="coding"><label for="read">阅读</label><input type="checkbox" name="hobby" value="read" id="read"><label for="game">游戏</label><input type="checkbox" name="hobby" value="game" id="game"><label for="sleep">睡觉</label><input type="checkbox" name="hobby" value="sleep" id="sleep"></div><div class="form-item"><label for="address" class="label-item">地址：</label><select name="address" id="address"><option value="0">--请选择--</option><option value="1">北京</option><option value="2">深圳</option><option value="3">杭州</option><option value="4">长沙</option></select></div><div class="form-item"><label for="personal" class="label-item">个人简介：</label><textarea name="personal" id="personal" style="resize: none;"></textarea></div><div class="form-item"><input type="submit" value="提交" class="btn btn-success"><input type="reset" value="重置" class="btn btn-warning"></div>
</form>
</body>
</html>服务器运行的前提下

当点击提交按钮，（post方式），信息就已经上传到服务器

如果在form.html中将method改成"get", 那么在服务器中的get方法是

点击提交以后页面会返回

那么服务器控制台的输出就是

需要注意的是：

form.html中的

指向的是服务端的

后面再来介绍ajax的提交方法

ajax

　全称ansync JavaScript and XML，是有一门异步的加载技术，局部刷新

　　ajax的操作有两种，一种是原生的，一种是jq（主要学习jq的）

　　异步加载，可以在不重载整个页面的前提下，实现局部刷新

原生ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id="btn">提交</button><script>var btn = document.getElementById("btn");btn.onclick = function () {//创建对象var xhr = new XMLHttpRequest();//method url async（要不要异步加载）// xhr.open("get","/ajax?username=xiaopo&password=999",true);xhr.open("post","/ajax",true);//post请求  设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送请求xhr.send("username=xiaopo&password=999");// xhr.send();xhr.onreadystatechange = function () {//readyState 有5个值//0  没有启动// 1  初始化 open之前// 2  发送请求 send之后// 3  响应 有一部分数据接收// 4  数据全部接收if(xhr.readyState === 4){if(xhr.status === 200){alert(xhr.status);//http  状态码}else{alert(xhr.statusText);}}}}</script>
</body>
</html>

运行服务端，加载页面

点击提交

服务器返回

信息来源于原生ajax中的

jq下的ajax

$.ajax() 表示创建了一个ajax对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p><input type="text" id="username" placeholder="请输入你的账号"></p><p><input type="password" id="password" placeholder="请输入你的密码"></p><p id="wrap" style="color: red;"></p><button id="btn">按钮</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>//ajax 必须在服务器的环境下才有效果 不能跨域var $btn = $("#btn");$btn.click(function () {$.ajax({"method": "post","url": "/ajax","data": {// value 是 js   jq val()  js对象和jq对象username: $("#username").val(),password: $("#password").val()},"success": function (data) {console.log("success");console.log(data);$("#wrap").html(data);},"error": function (error) {console.log("error");console.log(error.readyState);console.log(error.statusText);}});});// $.ajax({//
        // })/*$.get({});*/$.post({})</script>
</body>
</html>

点击提交

当信息不全时，返回

转载于:https://www.cnblogs.com/pywjh/p/ajax.html

ajax学习----json，前后端交互，ajax相关推荐

前后端交互——Ajax
前后端交互Ajax Ajax jQuery中的ajax $.get() $.post() $.ajax() 案例:图书列表 Ajax Ajax 即"AsynchronousJavascrip ...
必学习的前后端交互框架ajax
ajax显然是最重要的框架无论是c#,java,web程序通通能够解决前后端问题. 现在越来越多的人能够开发,为什么? 框架已经改变了程序员,现在基本是个程序员都可以在一个星期内写一个web程序. ...
前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言一.Aj ...
Ajax（实现前后端交互效果）
Ajax学习目标: 能够知道和服务器相关的基本概念:知道客户端和服务器通信的过程:什么是Ajax以及应用场景,知道接口和接口文档的概念. 1.客户端和服务器概念: 上网的本质目的:通过互联网的形式来获 ...
Ajax+Node.js前后端交互最佳入门实践(05)
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用数据交互,可以从服务器获取 ...
Ajax+Node.js前后端交互最佳入门实践(01)
1.Node.js简介 1.0.前后台数据交互流程在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
Ajax+Node.js前后端交互最佳入门实践(04)
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
（二）使用Ajax简单实现前后端交互
实现效果: 点击提交后: 前端页面源码: <!DOCTYPE html> <html lang="en">
MVC +easyui +json 前后端交互动态生成树形菜单
效果图: 1.view端代码实现,引入jquery.easyui 的js文件,创建树形菜单标签<ul>,如下所示: @{ViewBag.Title = "Home Page&qu ...
Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...

ajax学习----json，前后端交互，ajax

ajax学习----json，前后端交互，ajax相关推荐

最新文章

热门文章