前端项目实战陆-pad端原生网络请求页面无反应

大家好我是歌谣记录工作中遇到的各种问题微信公众号关注前端小歌谣持续学习前端知识

样式.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	 <link rel="stylesheet" type="text/css" href="./login/css/index.css">
 
</head>
<body>
	<h2>拉波尼质检系统管理</h2><br>
	<div class="login">
	    <form id="login" method="get">
	        <label><b>账 号:</b></label>
	        <input type="text" name="Uname" id="Uname" maxlength="100" placeholder="请输入账号">
	        <br><br>
	        <label><b>密 码:</b></label>
	        <input type="Password" name="Pass" id="Pass" placeholder="请输入密码">
	        <br><br>
	       <input type="button" name="log" id="log" value="登录">
	        <br><br>
	    </form>
	</div>
	<div id="logList">11111</div>
	 <script type="text/javascript" src="login/js/login.js">
</body>
</html>

原生.js

 		var Uname=document.getElementById("login")
		 var Pass=document.getElementById("Pass")
		 var log=document.getElementById("log")
		 var logList=document.getElementById("logList")
		 //绑定点击事件
		 log.addEventListener("click",function(){
			 console.log(2222)
		
				var http = {};
				http.quest = function (option, callback) {
				  var url = option.url;
				  var method = option.method;
				  var data = option.data;
				  var timeout = option.timeout || 0;
				  var xhr = new XMLHttpRequest();
				  
				  (timeout > 0) && (xhr.timeout = timeout);
				  xhr.onreadystatechange = function () {
				    if (xhr.readyState == 4) {
				      if (xhr.status >= 200 && xhr.status < 400) {
				        var result = xhr.responseText;
				        try { result = JSON.parse(xhr.responseText); } catch (e) { }
				        callback && callback(null, result);
				      } else {
				        callback && callback('status: ' + xhr.status);
				      }
				    }
				  }.bind(this);
				  xhr.open(method, url, true);
				  xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
				  if (typeof data === 'object') {
				    try {
				      data = JSON.stringify(data);
				    } catch (e) { }
				  }
				  xhr.send(data);
				  xhr.ontimeout = function () {
				    callback && callback('timeout');
	
				  };
				};
				http.get = function (url, callback) {
				  var option = url.url ? url : { url: url };
				  option.method = 'get';
				  this.quest(option, callback);
				};
				http.post = function (option, callback) {
				  option.method = 'post';
				  this.quest(option, callback);
				};
				http.post({ url: 'http://218.4.25.5:10006/pda/login', data: {
					account:document.getElementById("Uname").value,
					password:document.getElementById("Pass").value
				}, timeout: 1000 }, function (err, response) {
					console.log(response,"response")
				    if(response.code==200){
						window.location.href="./home.html"
					}
				});
});

运行结果

测试后没有反应

posted @ 2023-06-29 09:35 前端导师歌谣阅读(9) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端项目实战玖-pad端mui使用网络请求利用原生开发

· 前端项目实战捌-pad端mui使用网络请求

· 原生js如何请求接口

· 原生js实现http请求--模拟jquery的ajax函数

· js原生xhr请求XMLHttpRequest

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

前端项目实战陆-pad端原生网络请求页面无反应

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="./login/css/index.css">

	</head>
	<body>
	<h2>拉波尼质检系统管理</h2><br>
	<div class="login">
	<form id="login" method="get">
	<label><b>账号:</b></label>
	<input type="text" name="Uname" id="Uname" maxlength="100" placeholder="请输入账号">
	<br><br>
	<label><b>密码:</b></label>
	<input type="Password" name="Pass" id="Pass" placeholder="请输入密码">
	<br><br>
	<input type="button" name="log" id="log" value="登录">
	<br><br>
	</form>
	</div>
	<div id="logList">11111</div>
	<script type="text/javascript" src="login/js/login.js">
	</body>
	</html>

	var Uname=document.getElementById("login")
	var Pass=document.getElementById("Pass")
	var log=document.getElementById("log")
	var logList=document.getElementById("logList")
	//绑定点击事件
	log.addEventListener("click",function(){
	console.log(2222)

	var http = {};
	http.quest = function (option, callback) {
	var url = option.url;
	var method = option.method;
	var data = option.data;
	var timeout = option.timeout \|\| 0;
	var xhr = new XMLHttpRequest();

	(timeout > 0) && (xhr.timeout = timeout);
	xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {
	if (xhr.status >= 200 && xhr.status < 400) {
	var result = xhr.responseText;
	try { result = JSON.parse(xhr.responseText); } catch (e) { }
	callback && callback(null, result);
	} else {
	callback && callback('status: ' + xhr.status);
	}
	}
	}.bind(this);
	xhr.open(method, url, true);
	xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
	if (typeof data === 'object') {
	try {
	data = JSON.stringify(data);
	} catch (e) { }
	}
	xhr.send(data);
	xhr.ontimeout = function () {
	callback && callback('timeout');

	};
	};
	http.get = function (url, callback) {
	var option = url.url ? url : { url: url };
	option.method = 'get';
	this.quest(option, callback);
	};
	http.post = function (option, callback) {
	option.method = 'post';
	this.quest(option, callback);
	};
	http.post({ url: 'http://218.4.25.5:10006/pda/login', data: {
	account:document.getElementById("Uname").value,
	password:document.getElementById("Pass").value
	}, timeout: 1000 }, function (err, response) {
	console.log(response,"response")
	if(response.code==200){
	window.location.href="./home.html"
	}
	});
	});

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

前端项目实战陆-pad端原生网络请求页面无反应

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识