记一次ajax的实践

最新推荐文章于 2021-08-06 08:56:23 发布

小仓桑

最新推荐文章于 2021-08-06 08:56:23 发布

阅读量192

点赞数

分类专栏： jQuery 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_43462019/article/details/106572814

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax请求测验</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<form>
			账户：<input type="text" id="username" name="username" placeholder="请输入账户"/><br /><br />
			密码：<input type="text" id="password" name="password" placeholder="请输入密码"/><br /><br />
			key：<input type="text" id="key" name="key" placeholder="请输入key"/><br /><br />
			<input type="button" id="select" value="登录"/>
		</form>
	</body>
	<script type="application/javascript">
		
		$(function(){
			$("#select").on("click",function(){
				let name = $("input[name='username']").val()
				let password = $("input[name='password']").val()
				let key = $("input[name='key']").val()
				console.log(name, password, key)
				$.ajax({
					type:"post", //请求方式
					url:"http://bosgw.bimwinner.com/boscenterservice/account/login", //请求的url地址
					async:true,	//请求是否异步，默认为异步
					data:{
						"name":name,
						"password":password,
						"appKey":key
					},	//参数值
					dataType:"json",	//返回格式为json
					beforeSend:function(){
						//请求前的处理
						var r=confirm("按下按钮!");
						if(r==false){
							console.log("停止ajax请求！！！");
							request.abort();
						}
					},
					success:function(res){
						console.log(res)
						//请求成功时处理
							if(res.data !== null && res.data !== "" && res.data !== undefined){
								var i = '<div>是否成功:' + res.message + 'access_token：' + res.data.access_token + '</div>'
							}else{
								var i = '<div>是否成功:' + res.message +'</div>'
							}
							document.write(i);
			
					},
					complete:function(){
						//请求完成的处理
						
					},
					error:function(){
						//请求出错处理
						alert("请求出错！！！");
					}
				});
			})
		});
	</script>
	<style type="text/css">
		input{
			outline-style: none;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding: 4px 4px;
		    width: 250px;
		    /*font-size: 15px;*/
		    font-family: "Microsoft soft";
		    
		}
	</style>
</html>