AjAX实现JQuery实现方式
AjAX实现JQuery实现方式
JQuery实现方式
1.$.ajax()
- 语法:$.ajax({键值对})
AJAX代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery实现AJAX</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //定义方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url:"AjAXServlet",//请求路径 type:"POST",//请求方式 data:{"username":"jack","age":23}, success:function (data) { alert(data); },//响应成功后的回调函数 error:function(){ alert("出错啦...") },//表示如果请求响应出现错误 会执行的回调函数 dataType:"text"//设置接受到的响应数据的格式 }); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
java代码
package com.bai.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("/AjAXServlet") public class AjAXServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取请求参数 String username = req.getParameter("username"); //处理业务逻辑 //打印username System.out.println(username); //响应 resp.getWriter().write("hello:"+username); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }
运行结果
2.$.get():发送get请求
- 语法:$.get(url,[data],[callback],[type])
- 参数
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
- 参数
AJAX代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery实现AJAX</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //定义方法 function fun() { $.get("ajaxServlet",{username:"rose"},function (data) { alert(data); },"text"); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>
3.$.post():发送post请求
- 语法:$.post(url,[data],[callback],[type])
- 参数
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
- 参数
AJAX代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery实现AJAX</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //定义方法 function fun() { $.post("ajaxServlet",{username:"rose"},function (data) { alert(data); },"text"); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html>