MySQL node.js Ajax 省份城市二级联动

最新推荐文章于 2021-02-22 14:31:49 发布

人生海海丶

最新推荐文章于 2021-02-22 14:31:49 发布

阅读量211

点赞数

分类专栏： mysql Node ajax

本文链接：https://blog.csdn.net/stayreal_OA/article/details/101058444

版权

mysql 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

Node

2 篇文章 0 订阅

订阅专栏

db.js

index.js

city.html

常规配置好db.js
city.html初始化的时候发送ajax请求，端口号为8080，由index.js接受此请求并匹配其中对应的路由方法。city.html中匹配index.js中路由

连接数据库查询省份表中所有的数据，把结果响应给客户端

let sql ="select * from province";
    mysql.base(sql,[],function(results){
        resp.json(results);  // let jsonstr = JSON.stringify(results); response.send(jsonstr);
    })

然后客户端 ajax 的 success：data接收到响应结果，把接收到的结果用模板方式渲染到页面上。

db.js

//导入mysql驱动
const mysql = require("mysql");

//导出方法
//参数1：sql文 字符串
//参数2：？对应得参数[] {}
//参数3：回调函数
exports.base=function(sql,params,callback){
    //创建连接对象
    const connection = mysql.createConnection({
        host:"localhost",
        database:"web84",
        user:"root",
        password:"123456"
    });

    //服务器连接数据库
    connection.connect();

    connection.query(sql,params,function(error,results,fields){
        if(error) throw error;
        //成功获取查询的结果
        callback(results);
    });
    //关闭连接
    connection.end();

}

index.js

const express = require("express");
const path = require("path");
const app = express();

const bodyParser=require("body-parser");

const mysql =  require("./db");


app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());



//挂载session对象
app.use(session);


//------------------------------------------
//取得省份数据
app.get("/getProvince",function(req,resp){
    //resp.send(datas);
    //连接数据库查询省份表中所有的数据，把结果响应给客户端
    let sql ="select * from province";
    mysql.base(sql,[],function(results){
        resp.json(results);  // let jsonstr = JSON.stringify(results); response.send(jsonstr);
    })
});

//取得城市
app.post("/getCity",function(req,resp){
    console.log("post.......................");
    //取得省份id
    let proId = req.body.proId;
    //根据省份id查询城市表
    let sql = "select * from city where proId=?";
    mysql.base(sql,[proId],function(results){
        console.log(results);
        resp.json(results);
    })
});


app.post("/getCityByCityId",function(req,resp){
    let cityId = req.body.cityId;
    //根据省份id查询城市表
    let sql = "select * from city where cityId=?";
    mysql.base(sql,[cityId],function(results){
        let obj={};
        console.log(results);
        if(results.length>0){
            obj=results[0];
        }
        resp.json(obj);
    })
});


//静态资源的设置
app.use("/static",express.static("./views"));
let proname=path.dirname(__dirname); 
app.use("/js",express.static(path.join(proname,"js")));
app.use("/css",express.static(path.join(proname,"css")));
app.use("/img",express.static(path.join(proname,"img")));



app.listen("8080",function(){
    console.log("ajax8080running....");
})

city.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width:173px;
			}
		</style>
		 <script src="http://localhost:8080/js/jquery-3.4.1.min.js" type="text/javascript"></script>
		<!-- 导入template-web.js -->
		<script src="http://localhost:8080/js/template-web.js" type="text/javascript"></script>
		 <!-- 定义模板 -->
		 <script id="provinceTempl">
			{{each data}}
				<option value='{{$value.proId}}'>{{$value.proName}}</option>
			{{/each}}
		</script>
		<script id="cityTempl">
			{{each data}}
				<option value='{{$value.cityId}}'>{{$value.cityName}}</option>
			{{/each}}
		</script>

		<script type="text/javascript">
		
			function clearFix(){
				$("#postCode").val("");
				$("#areaCode").val("");
			}

			$(function(){
				//发送ajax请求取得省份数据  axios封装了ajax方法  支持es6 promise
				$.ajax({
					type: "get",
					url: "http://localhost:8080/getProvince",
					// dataType:"text",
					//指定了dataType: "json"/不指定dataType, data参数接收json对象
					//指定了dataType: "text", data参数接收json字符串
					success: function (data) {
						var resultData = {};
						resultData.data=data;
						var html = template("provinceTempl", resultData);
						$("#province").append(html);

						/* for(var i=0;i<data.length;i++){
							var proobj = data[i];
							var option = "<option value='"+proobj.proId+"'>"+proobj.proName+"</option>";
							$("#province").append(option);
						} */

					}
				});


				$("#province").change(function(){
					clearFix();
					var proId1 = $(this).val();
					console.log(proId1);
					/* console.log(proId); */
					$.ajax({
						type: "post",
						url: "http://localhost:8080/getCity",
						data:{proId:proId1},
						dataType: "json",
						success: function (data) {
							//清空城市的下拉框
							$("#city option:not(:first)").remove();
							/* for(var i=0;i<data.length;i++){
								var cityobj = data[i];
								var option = "<option value='"+cityobj.cityId+"'>"+cityobj.cityName+"</option>";
								$("#city").append(option);
							} */
							var resultData = {};
							resultData.data=data;
							var html = template("cityTempl", resultData);
							$("#city").append(html);
						}
					});
				})


				$("#city").change(function(){
					clearFix();
					var cityId1 = $("#city").val();
					$.ajax({
						type: "post",
						url: "http://localhost:8080/getCityByCityId",
						data: {cityId:cityId1},
						dataType: "json",
						success: function (data) {
							$("#postCode").val(data.postCode);
							$("#areaCode").val(data.areaCode);
						}
					});
				});

			})
			
			
		</script>
		
	</head>
	<body>
		<h1>省份城市二级联动</h1>
		省份：
		<!--<select id="province" onchange="f1()">-->
		<select id="province">
			<option value="">请选择</option>

		</select><br/>
		城市：
		<select id="city">
			<option value="">请选择</option>
		</select><br/>
		邮编：
		<input type="text" id="postCode" /><br/>
		区号：
		<input type="text" id="areaCode" /><br/>
	</body>
</html>

人生海海丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MySQL node.js Ajax 省份城市二级联动

目录db.jsindex.jscity.html常规配置好db.js city.html初始化的时候发送ajax请求，端口号为8080，由index.js接受此请求并匹配其中对应的路由方法。city.html中匹配index.js中路由连接数据库查询省份表中所有的数据，把结果响应给客户端 let sql ="select * from province";...
复制链接

扫一扫