当前位置:网站首页>【无标题】
【无标题】
2022-07-20 05:50:00 【小尘的一天】
一、使用ajax发送post请求:
<script>
let obtn = document.getElementById("obtn");
let odiv = document.getElementById("odiv");
obtn.onclick = () => {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let params = `username=${username}&password=${password}`;
//发送ajax请求
// 1、创建 AJAX 对象;
let ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
ajax.open('POST', '/login_post');
ajax.setRequestHeader("enctype","application/x-www-form-urlencoded");
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;
ajax.onreadystatechange = ()=>{
// 获取响应回来的数据
if(ajax.readyState===4&& ajax.status===200){
console.log(ajax.readyState);
console.log(ajax.responseText);
// 请求到数据之后,就可以把数据更新到页面上
odiv.innerHTML = ajax.responseText;
}
};
// 4、发送请求。
ajax.send(params)
}
</script>
服务端代码:
else if(requestUrl=== "/login_post"){ //来处理css文件的请求 如果这个路径包含.css
request.on('data',(postData)=>{
let uname = postData.toString().split("&")[0].split("=")[1]; // 获取用户提交的用户名
let pwd = postData.toString().split("&")[1].split("=")[1]; // 获取用户提交的密码
if(uname===username && pwd===password){
response.end("账号密码正确,登录成功");
}else{
response.end("账号或者密码错误,登录失败");
}
});
}
超时处理:
有时网络会出现问题或者服务端出问题导致请求时间过长,一般提示网络请求稍后重试,以增加用户的体验感。在代码中我们可以通过定时器和请求中断来实现超时处理的效果。
var timer = setTimeout(function () {
// 取消请求,中断请求
ajax.abort();
}, 5000);
二、方法抽取(了解)
function ajax(mehtod, url, param, success, time){
var ajax;
//处理ajax获取时候的兼容性问题
try { // 非 IE
ajax = new XMLHttpRequest();
}
catch (e) { // IE
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
if(method === 'get'){
param = encodeURI(param); //针对get请求的查询参数出现中文的编码处理
url = url + '?' + param;
param = null;
}
ajax.open(method, url);
if(method === 'post'){
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
ajax.onreadystatechange = function () { // onload
if(ajax.readyState == 4 && ajax.status ==
边栏推荐
- 「干货实验」华为 DHCP +单臂路由实验
- hello csdn
- Understanding and using unity2d custom scriptable tiles (I) -- understanding the tilebase class
- Experience of driver development for embedded devices and external devices
- uni-app - App 平台内嵌网页物理手机自带返回键失效解决方案(内嵌的 webview 网页 H5 打包后手机物理返回键无效直接退出应用了)
- UGUI——ToggleGroup
- 一共有n位整数,一位能被1整除,二位能被2整除,三位能被3整除,...,n位能被n整除。 求最大的满足这个条件的数字。(回溯法)
- 使用优炫数据库时,如何查看系统是否支持某组件
- 请问一下 flink1.15 flinksql kafka topic如果不提前创建提交作业就会失败
- Compose实现webView文件选择
猜你喜欢
pycharm 突然无法连接远程服务器
Uni app - plugin [app cloud packaging] installation failed! (the app cloud packaging plug-in installation fails when the app is packaged) solution
RIoTBoard开发板系列笔记(六)—— buildroot构建系统镜像
解决错误:org.apache.ibatis.binding.BindingException
Building space temperature distribution prediction model and temperature curve drawing graduation thesis
Keras调用plot_model报错解决方案
Jupyter中markdown的操作技巧
买一个能拍蒜的菜刀要多少钱?通过爬虫爬取菜刀价格
What is rendering pipeline and how to draw 3D objects
【STM32F103RCT6】CAN通信
随机推荐
Uni app - solution to the failure of the return key of the mobile phone with the embedded web page physics in the app platform (after the embedded WebView web page H5 is packaged, the mobile phone's p
色彩空间(2)—— YUV
ffmpeg 4.3添加自定义demuxer
One bite of Stream(4)
uni-app - App 平台内嵌网页物理手机自带返回键失效解决方案(内嵌的 webview 网页 H5 打包后手机物理返回键无效直接退出应用了)
McCabe度量方法计算程序复杂度
二、mysql进程之间关系、配置文件、文件socket、网络socket、mysql密码破解
Title of graduation thesis on Mining Engineering
pinctrl
Unity实现人物移动和镜头跟随
What is rendering pipeline and how to draw 3D objects
UGUI——IndexedSet
UGUI——Text和TextEffect
Graduation thesis topics of hydrology and water resources [213]
pycharm 突然无法连接远程服务器
学习记录五
unity 根据索引 获取字典的键值,
力扣总结之 “N”数之和
From buying servers to building personal blog websites | detailed process of graphics and text (Tencent cloud | pagoda panel | WordPress | argon)
WordPress 6.0.1 新版已经发布,建议全部更新。