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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。