Ajax实现方式（JQ）:ajax()、get、post
程序员文章站
2024-01-20 21:13:40
...
Ajax实现方式（JQ）
一、方法1 $.ajax()
- 语法： . a j a x ( 键 值 对 ) ; / / 使 用 .ajax({键值对}); //使用 .ajax(键值对);//使用.ajax()发送异步请求
ajax要和服务器交互，故要依赖与tomcat。
把jquery-3.3.1.min.js放进js目录，创建cn.itcast.web.ajax包，创建AjaxServlet 的servlet类
package cn.itcast.web.ajax;
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;
/**
* @author QLBF
* @version 1.0
* @date 2020/12/4 12:12
*/
@WebServlet("/ajaxServlet ")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数,下面js文件传过来的
String username = request.getParameter("username");
String age = request.getParameter("age");
/* //处理业务逻辑。耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}*/
//2.打印username
System.out.println(username);
//响应
response.getWriter().write("hello:"+username+" age"+age);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
在web目录直接创建一个shixian_1.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax实现方式1</title>
<%--导入jq必要包--%>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet" , // 写你要访问的请求路径
type:"POST" , //请求方式,不写默认为get
//data: "username=jack&age=23",//请求参数
data:{"username":"mike2","age":23},//写你要发送的参数
success:function (data) {
alert(data);
},//z这里的data是形参，不是上面请求的data，这是响应成功后的回调函数,data是服务器servlet传过来的响应参数(是servlet设置的response.getWriter().write，若没有则不会弹出)
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误(例如请求路径写错)，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式，一般为json，最后一个键值对后面可不要“,"
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
注意success:function 和error里面不能加注释，否则alert出错
浏览器访问http://localhost:8080/shixian_1.jsp
这时服务器响应给它的信息已经alert出来了，同时控制台输出：
二、方法2 $.get() 和 $.post()：（更简单）
- $.get()：发送get请求
- 语法：$.get(url, [data], [callback], [type])
- 参数：
- url：请求路径
- data：请求参数
- callback：回调函数(就类似上面的success)
- type：响应结果的类型
- $.post()：发送post请求
- 语法：$.post(url, [data], [callback], [type])
- 参数：
- url：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
get:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax实现方式之get</title>
<%--导入jq必要包--%>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//这里路径不要写/
$.get("ajaxServlet",{"username":"rost_get","age":25},function (data) {
alert(data)
},"text")
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
post和get一样，只是名字不同而已：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax实现方式之post</title>
<%--导入jq必要包--%>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//这里路径不要写/
$.post("ajaxServlet",{"username":"rost_post","age":99},function (data) {
alert(data)
},"text")
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>
上一篇： 电商代运营是什么意思？靠不靠谱呢？