jQuery之ajax的网络请求
我们写前端可以用form表单来进行get和post请求，但是效果可能不太好。
1. 导入jquery
2. 设置登陆按钮的点击事件
3. 获取参数
4. 设置请求链接
5. 添加参数
6. 获取返回的值
注意，由于我在本机模拟的请求，请求的接口的ip地址为192.168.1.120，所以前端页面访问时不能为localhost或者127.0.0.1
下面时前端代码，为Get和Post的有参请求
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>登陆</title>
<!--第一步导入jquery-->
<script src="lib/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.divForm {
position: absolute;
/*绝对定位*/
width: 300px;
height: 200px;
text-align: center;
/*(让div中的内容居中)*/
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="divForm">
<h2 align="center">欢迎来到姚丹交流网站</h2>
<font>账号</font> <input id="nameId" type="text" name="username" />
<br/><br/>
<font>密码</font> <input id="pwdId" type="password" name="password" />
<br/><br/>
<input type="radio" name="status" value="user" checked="checked" />用户
<input type="radio" name="status" value="manager" />管理员
<br/><br/>
<!-- 点击图片就可以提交 -->
<br/><br/>
<input align="right" type="button" value="登陆" id="loginId" />
<input type="submit" value="注册" />
</div>
</body>
<script type="text/javascript">
//ajax的代码
var btn=$('#loginId'); //获取登陆按钮
btn.click(function () { //登陆按钮的点击事件
var name=$('#nameId').val(); //获取账号的值
var pwd=$('#pwdId').val(); //获取密码
$.post('http://192.168.1.120/StudentManage/jsdemo.php', //请求的接口的地址，如果get请求直接修改post为get，下面为参数
{
username:name, //请求参数，key为username 值为name
password:pwd //请求参数
},
function (data,status) { //返回状态,data为返回的json数据，status为请求完成的状态值
alert(data+"--"+status);
});
});
</script>
</html>下面时php接口代码
<?php
$username=$_POST["username"]; //调用php的$_POST[]方法，里面为请求的参数，
$password=$_POST["password"]; //如果前端为get请求，就把$_POST[]换成$_GET[]
echo("请求成功") //打印出返回的值
?>下面时ajax无参的get请求
<script type="text/javascript">
var btn=$('#loginId'); //获取登陆按钮
btn.click(function () { //登陆按钮的点击事件
$.get('http://192.168.1.120/StudentManage/jsdemo.php', //请求的接口的地址
function (data,status) { //返回状态,data为返回的json数据，status为请求完成的状态值
alert(data+"--"+status);
});
});
</script>
浙公网安备 33010602011771号