请求方式：
在浏览器中输入url?参数名1=参数值1&参数名2=参数值2
只要可以书写地址的地方都可以发起get请求
应用场景：查询数据(不够安全)
post请求请求方式
url：请求路径(浏览器地址栏) data: 参数域 (js代码中)
jquery+ajax(异步请求)
应用场景：
增删改数据
3.利用ajax方式进行请求的代码html代码
<body class="bg">
<div class="whole">
<h3>
管理系统
h3>
<div class="item">
<span>账号：span><input type="text" class="account">
div>
<div class="item">
<span>密码：span><input type="password" class="password">
div>
<div class="item">
<input type="button" class="login" value="登录">
div>
div>
body>
js代码
<script>
$(document).ready(function(){
//登录
$(".login").on("click",function(){
//动态获取
var account=$(".account").val();
var password=$(".password").val();
//发起ajax请求
$.ajax({
//以get方式请求
//url:"地址？account=admin&password=1234"
url:"TestServlet",//请求路径既是要访问的servlet的名称相对路径
type:"post",//请求方式默认是get
data:{
account:account,
password:password,
},//参数域发送给服务器的数据
success:function(data){
//请求成功后执行的函数
if(data.msg=="登录成功"){
alert(data.account)
alert(data.password)
}else{
alert("登陆失败")
}
},
error:function(data){
//请求失败后执行的而函数
alert("出错了")
}
})
})
})
<script>
js代码详解
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些 *** 作。
基础语法： $(selector).action()
$美元符号定义 jQuery选择符（selector）“查询"和"查找” HTML 元素jQuery 的 action() 执行对元素的 *** 作$(“.login”).on(“click”,function(){ })
解释：
$(“.login”)通过CSS类选择器选择html元素
<input type="button" class="login" value="登录">
$(“.login”).on(“click”,function(){ })
为这个html元素添加click事件
var account=$(“.account”).val();
var account声明变量account$(“.account”)获取html元素$(“.account”).val();.val()用于获取html元素中的值$.ajax({})表示发起ajax请求
以get方式请求
//动态获取前端输入框的数据
var account=$(".account").val();
var password=$(".password").val();
$.ajax({
url:"TestServlet",//请求路径既是要访问的servlet的名称相对路径
type:"post",//请求方式默认是get
//参数域发送给服务器的数据
//将前端获得的数据发送到后端
data:{
//变量名：数值
account:account,//第二个account为 var account=$(".account").val();
password:password,
},
//下面的都是为了接受后台数据
success:function(data){
//请求成功后执行的函数
if(data.msg=="登录成功"){
alert(data.account)
alert(data.password)
}else{
alert("登陆失败")
}
},
error:function(data){
//请求失败后执行的而函数
alert("出错了")
}
})
后台TestServlet代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("testpost");
//解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//设置后端给前端的信息格式，默认html可以改
response.setContentType("text/json");
//接受参数
//就是ajax请求中data域中的数据
String account=request.getParameter("account");
String password=request.getParameter("password");
//后端模拟逻辑， *** 作数据库
System.out.println(account);
System.out.println(password);
//仅传一个字符串String msg="false";
//传多个信息将字符串转为json对象
String msg="{\"msg\":\"登陆失败\",\"account\":\""+account+"\",\"password\":\""+password+"\"}";
if(account.equals("admin")&&password.equals("123456")) {
msg="{\"msg\":\"登录成功\",\"account\":\""+account+"\",\"password\":\""+password+"\"}";
}
//给前端响应数据
response.getWriter().write(msg);
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）