jQuery框架的ajax函数—— ( g e t ) (get) (get)(post)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rw3ZjWHk-1600399755294)(
)]
##$.get请求-原理
get函数
$.get(url, [data], [callback], [type])
url:表示服务器的访问路径,如:“s1”
data:表示向服务器发送的参数, 格式: 1: “username=wzx&password=123” 2:json串
callback:匿名函数,表示接收服务器发送过来的响应,这个函数自动执行
type :表示浏览器期望服务器发送过来的数据类型,格式:“text” “json”
get请求原理
##jquery_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="application/javascript">
$(function () {
$("#btn").on("click", function () {
$.get(
"s2",
"username=lbl&password=admin123",
function (data) {
//这个data就是服务器返回的字符串
//处理数据
alert(data);
},
"text"
);
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>
运行效果:
##AjaxServlet2:
package com.lbl.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/s2")
public class AjaxServlet2 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到了异步请求....s2");
response.getWriter().write("helloworld...s2");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username);
System.out.println(password);
}
}
运行效果:
Post同理
jquery_ajax_post.html完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="application/javascript">
$(function () {
$("#btn").on("click", function () {
$.get(
"s2",
"username=lbl&password=admin123",
function (data) { //这个data就是服务器返回的字符串
//处理数据
alert(data);
},
"text"
);
$.post(
"s2",
"username=lft&password=123",
function(data){ //这个data就是服务器返回的字符串 var data = []
//处理数据
},
"json"
);
var url = "s2";
var param = "username=lft&password=123";
var func = function(data){
};
var type = "json";
$.post(url,param,func,type);
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>