文章摘要
这篇文章详细介绍了如何使用JavaScript的Ajax技术动态加载并解析JSON数据。文章通过提供get、post和ajax按钮的代码示例，展示了如何通过JavaScript事件处理函数调用Servlet后端服务，并将响应数据以JSON格式加载到网页。此外，文章还解释了如何处理用户输入数据，包括处理输入为空的情况，并提供了默认值以避免错误。文章还强调了Ajax技术的优势，可以提高网页加载效率并提升用户体验。
效果图
jsp代码
<form >
姓名：<input name=”name” type=”text”/>
年龄：<input name=”age” type=”text”/>
<input type=”button” class=”get” value=”get提交”/>
<input type=”button” class=”post” value=”post提交”/>
<input type=”button” class=”ajax” value=”ajax提交”/>
</form>
<div id=”box”></div>
servlet代码
//get
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(“text/html”);
response.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;charset=utf-8”);
String name=request.getParameter(“name”);
String age=request.getParameter(“age”);
if (name==null || name==””) {
name=”测试名字admin”;
}
if (age==null || age==””) {
age=”测试年龄100″;
}
user user=new user(1, name, age);
PrintWriter out=response.getWriter();
JSONObject jsonObj=JSONObject.fromObject(user);
out.print(jsonObj);
out.flush();
out.close();
}
//post
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// response.setContentType(“text/html”);
request.setCharacterEncoding(“utf-8”);
response.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;charset=utf-8”);
String name=request.getParameter(“name”);
if (name==null || name==””) {
name=”测试名字admin”;
}
String age=request.getParameter(“age”);
if (age==null || age==””) {
age=”测试年龄100″;
}
user user=new user(1, name, age);
PrintWriter out=response.getWriter();
JSONObject jsonObj=JSONObject.fromObject(user);
out.print(jsonObj);
out.flush();
out.close();
}
JS核心代码
<script type=”text/javascript”>
//get
$(document).ready(function() {
$(‘form .get’).click(function() {
$.get(‘ajaxServlet’,function(response,status,xhr){
var dataObj=eval(“(” + response + “)”);
$(“#box”).html(response);
alert(dataObj.name);
});
});
//post
$(‘form .post’).click(function() {
$.post(‘ajaxServlet’,function(response,status,xhr){
var dataObj=eval(“(” + response + “)”);
$(“#box”).html(response);
});
});
//ajax
$(‘form .ajax’).click(function() {
alert($(“[name=’name’]”).val());
$.ajax({
type:’get’,
url:’ajaxServlet’,
data:{
name:$(“[name=’name’]”).val(),
age:$(“[name=’age’]”).val()
},
success:function(response, status, xhr){
$(“#box”).html(response);}
});
});
});
</script>
以上这篇ajax动态加载json数据并详细解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:jQuery Ajax异步处理Json数据详解jQuery使用ajax方法解析返回的json数据功能示例AJAX和jQuery动态加载数据的实现方法浅析ajax请求json数据并用js解析(示例分析)