python下ajax请求的处理&鼠标点击下拉列表的实现

最新推荐文章于 2022-06-18 22:58:55 发布

qq_29202285

最新推荐文章于 2022-06-18 22:58:55 发布

阅读量189

点赞数

分类专栏： python html5 文章标签： python json ajax jquery html5

本文链接：https://blog.csdn.net/qq_29202285/article/details/105170875

版权

python 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

先给个html5完整代码段（name：main1.html）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#sub_menu_1{
			display: none;
			list-style: none;
			
		}
		ul li:hover{
			cursor: pointer;
		}
		*{
			margin:0;
			padding: 0;
		}
		#sub_menu_2{
			display: none;
			list-style: none;
		}
		
		/*让li列表浮动起来*/
		#sub_menu_1 li {
			float: left;
		}
		
		
		
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	
	
</head>
<body>
	<ul class="nav">
		<li onclick = "f('sub_menu_1')">一级菜单1
			<ul id="sub_menu_1">		
				<li>
					<ul id="ni">二级餐单1</ul>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
				</li>
				
				<li>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
				</li>
				
				<li>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
				</li>
				
				<li>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
					<ul>二级餐单1</ul>
				</li>
				
			</ul>
			
		</li>
	</ul>
	
	
	<script >
		function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "block")
                    sub_menu.style.display = "none";
                else
                    sub_menu.style.display = "block";
                    
				
            }
	</script>


	
    <script>
		$(document).ready(function(){
			$.ajax({
				url:"/form",
				data:'hello',
				dataType: "json", 
				contentType : "application/json",
				type: "get",
				success:function(data){		
					console.log(data.data[0]["country"]);
					//data.data[0]是data.data数组的第一条数据
					$("#ni").text(data.data[0]["country"]);
				},
				 error:function (xhr,type,errorThrown) {
				        }
			})
			
		})	
    </script>



</body>
</html>

下拉列表实现的代码块：

<script >
		function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "block")
                    sub_menu.style.display = "none";
                else
                    sub_menu.style.display = "block";
                    
				
            }
	</script>

关于ajax请求：
代码部分在上文第一部分的代码块。
dataType: “json”。返回的数据类型一般使用json，这里要注意写后端的时候返回的是json类型的数据。
关于后端部分的代码如下，python语言

from flask import Flask
from flask import render_template
from flask import jsonify
import json
import sql
#sql是我写的查询数据的模块
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template("main1.html")

@app.route("/form")
def get_form_data():
    res=[]
    for tup in sql.get_form_data(): #sql.get_form_data()是元组里面有多个元组
        print(tup)  #tup格式：元组
        res.append({"country":tup[0],"confirm":int(tup[1]),"dead":int(tup[2])})
    return jsonify({"data":res})




if __name__ == '__main__':
    app.run()

qq_29202285

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
python下ajax请求的处理&鼠标点击下拉列表的实现

先给个html5完整代码段（name：main1.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #sub_menu_1...
复制链接

扫一扫