准备工作
javascript原生的ajax操作比较麻烦,新版js中提供了更为便捷的操作方式我们后面再介绍,这里先看下jQuery操作ajax。jQuery提供了一些函数简化了这些操作,接下来我们看下如何使用jQuery发送ajax请求。先准备一个servlet用来处理ajax发送的请求。
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username);
System.out.println(password);
PrintWriter out = response.getWriter();
out.write("hello");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
准备一个html,里面编写一个button,当点击该按钮的时候执行我们编写好的函数发送ajax请求
<body>
<button id="btn">发送异步请求</button>
</body>
<script>
$(function () {
$("#btn").click(
function () {
//发送ajax请求的代码
}
);
});
</script>
$.ajax()方式
通过使用$.ajax()函数,我们可以发送一个ajax请求,该函数需要传入一些参数。
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet" , //请求路径
type:"POST" , //请求方式
data:{"username":"jack","password":123},//请求参数
dataType:"text",//设置接受到的响应数据的格式
//回调函数
success:function (data) {
console.log(data);
},
error:function () {
console.log("出错啦...")
}//表示如果请求响应出现错误,会执行的这个回调函数
})
$.get方式
该方式会发送get请求方式的ajax请求。
语法如下,其中[]的内容是可选的:
$.get(url, [data], [callback], [type])
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
代码
$.get("ajaxServlet",//请求路径
{username:"jack"},//请求参数
function (data) {//回调函数
console.log(data);
},
"text"//响应结果的类型
);
$.post方式
该方式会发送post请求方式的ajax请求
语法如下,其中[]的内容是可选的:
$.post(url, [data], [callback], [type])
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
代码
$.post("ajaxServlet",//请求路径
{username:"jack"},//请求参数
function (data) {//回调函数
console.log(data);
},
"text"//响应结果的类型
);