jQuery对Ajax的支持
在jQuery中提供有$.ajax()方法,该方法有如下常用参数:
No | 设置参数 | 描述 |
---|---|---|
1 | url | Ajax的执行处理路径 |
2 | method | 表示当前发出的Http请求模式,get或者post |
3 | data | 向服务器传递的参数集合 |
4 | dataType | 服务器返回数据类型(text、json、xml、html、jsonp、script) |
5 | success | 处理成功后执行的回调函数 |
6 | error | 请求失败时的处理函数 |
使用Ajax处理JSON数据
1.编写Servlet程序
package com.ajax.servlet;
import net.sf.json.JSONObject;
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;
import java.util.Enumeration;
@WebServlet(urlPatterns = "/test")
public class TestServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
JSONObject obj = new JSONObject();
Enumeration<String> enu = request.getParameterNames();
while(enu.hasMoreElements()){
String paramName = enu.nextElement();
String paramValue = request.getParameter(paramName);
obj.put(paramName,paramValue);
}
response.getWriter().print(obj.toString());
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
2.编写页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#age").on("change",function(){
$("#ageMsg").text($("#age").val());
});
$("#sendBut").on("click",function(){
$.ajax({
url:'test',
method:'post',
data:{
name:$('#name').val(),
age:$('#age').val()
},
dataType:'json',
success:function(data){
$('#showDiv').append('<p>姓名:'+data.name+'\t年龄:'+data.age+'</p>');
},
error:function(){
window.console.log('发生了错误!!!');
}
});
});
});
</script>
</head>
<body>
<div id="showDiv"></div>
<div>
<label>姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" autofocus/><br>
<label>年龄:</label>
<input type="range" id="age" name="age" min="0" max="100" />
<span id="ageMsg"></span><br>
<input type="button" id="sendBut" value="发送" />
</div>
</body>
</html>
运行效果如下所示:
分别处理get与post请求
为了帮助用户简化代码,jQuery还提供有两个简短的函数:
- 处理GET请求:
$.get(请求地址,{参数:内容...},回调函数,'json|text|xml'};
- 处理POST请求:
$.post(请求地址,{参数:内容...},回调函数,'json|text|xml'};
对以上页面操作,可以用一下程序简化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#age").on("change",function(){
$("#ageMsg").text($("#age").val());
});
$("#sendBut").on("click",function(){
$.post('test',{
name:$('#name').val(),
age:$('#age').val()
},function(data){
$('#showDiv').append('<p>姓名:'+data.name+'\t年龄:'+data.age+'</p>');
},'json');
});
});
</script>
</head>
<body>
<div id="showDiv"></div>
<div>
<label>姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" autofocus/><br>
<label>年龄:</label>
<input type="range" id="age" name="age" min="0" max="100" />
<span id="ageMsg"></span><br>
<input type="button" id="sendBut" value="发送" />
</div>
</body>
</html>
运行程序发现结果与以上用$.ajax()函数的一致。