ajax动态数据解析,ajax动态加载json数据并详细解析

效果图

姓名：

年龄：

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核心代码

//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);}

});

});

});