使用原生Ajax写三级联动

最新推荐文章于 2022-10-06 15:33:50 发布

VIP文章云雀·

最新推荐文章于 2022-10-06 15:33:50 发布

阅读量201

点赞数 5

本文链接：https://blog.csdn.net/weixin_53388736/article/details/116835053

版权

在这里插入图片描述

node搭建web服务器步骤

1.首先创建一个项目文件夹

1）新建一个项目文件夹demo，进入后按住shift键，然后点击鼠标右键，选择点击在此处打开PowerShell窗口，打开命令行窗口
2）在窗口中输入命令 npm init 来初始化项目，这个过程中会问一些问题，可以直接一直按回车，最后问yes or no 的时候回答yes即可，demo文件夹中如果生成了一个package.json，证明初始化成功了

2.用npm安装express

1）在命令行窗口中输入命令 npm install express 按回车，安装express
2）安装完以后，你会看到项目目录中多了一个node_modules文件夹

3.创建index.js文件并编写服务器端代码

在demo文件夹中创建一个index.js文件，写入如下代码并保存

//引入express模块
const express = require('express');
//创建Web服务器
const app = express();

// 处理静态资源
app.use(express.static('public'))

// 启动监听
app.listen(3000, function(){
  console.log('running123...');
})

4.启动服务器后再浏览器中查看

1）在命令行窗口中输入命令 node index.js 按回车来启动服务器，若启动成功，则会显示“running123…”。

请先完成1-4步，第5步讲ajax怎么写

5.创建ajax.html文件并编写客户端代码

1）在demo文件夹下创建一个public文件夹，里面用来存放文件
2）在public文件夹里创建一个HTML文件 ajax.html
3）编写html文件代码并保存

4）打开浏览器输入http://localhost:3000/ajax.html 回车
执行代码弹出内容则表示成功

然后是封装写好的Ajax 可以直接用

 function ajax (options) {
	// 存储的是默认值
	var defaults = {
		type: 'get',
		url: '',
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	};

	// 使用options对象中的属性覆盖defaults对象中的属性
	Object.assign(defaults, options);

	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 拼接请求参数的变量
	var params = '';
	// 循环用户传递进来的对象格式参数
	for (var attr in defaults.data) {
		// 将参数转换为字符串格式
		params += attr + '=' + defaults.data[attr] + '&';
	}
	// 将参数最后面的&截取掉 
	// 将截取的结果重新赋值给params变量
	params = params.substr(0, params.length - 1);

	// 判断请求方式
	if (defaults.type == 'get') {
		defaults.url = defaults.url + '?' + params;
	}
	// 配置ajax对象
	xhr.open(defaults.type, defaults.url);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 用户希望的向服务器端传递的请求参数的类型
		var contentType = defaults.header['Content-Type']
		// 设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type', contentType);
		// 判断用户希望的请求参数格式的类型
		// 如果类型为json
		if (contentType == 'application/json') {
			// 向服务器端传递json数据格式的参数
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 向服务器端传递普通类型的请求参数
			xhr.send(params);
		}

	}else {
		// 发送请求
		xhr.send();
	}
	// 监听xhr对象下面的onload事件
	// 当xhr对象接收完响应数据后触发
	xhr.onload = function () {

		// xhr.getResponseHeader()
		// 获取响应头中的数据
		var contentType = xhr.getResponseHeader('Content-Type');
		// 服务器端返回的数据
		var responseText = xhr.responseText;

		// 如果响应类型中包含applicaition/json
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText)
		}

		// 当http状态码等于200的时候
		if (xhr.status == 200) {
			// 请求成功 调用处理成功情况的函数
			defaults.success(responseText, xhr);
		}else {
			// 请求失败 调用处理失败情况的函数
			defaults.error(responseText, xhr);
		}
	}
}

然后在index.js引入

const chinReagion= require('china-region');

china-region要在cmd里面引用

指令是

npm install china-region

在node_modules里面查看有没有
在这里插入图片描述

最后是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="template-web.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/template_js/0.8.0/template.js"></script> -->
</head>
<body>  
 
    <select class="form-control" id="province"><

最低0.47元/天解锁文章

云雀·

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用原生Ajax写三级联动

node搭建web服务器步骤1.首先创建一个项目文件夹1）新建一个项目文件夹demo，进入后按住shift键，然后点击鼠标右键，选择点击在此处打开PowerShell窗口，打开命令行窗口2）在窗口中输入命令 npm init 来初始化项目，这个过程中会问一些问题，可以直接一直按回车，最后问yes or no 的时候回答yes即可，demo文件夹中如果生成了一个package.json，证明初始化成功了2.用npm安装express1）在命令行窗口中输入命令 npm install expr.
复制链接

扫一扫