明霞山资源网 Design By www.htccd.com
效果图
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数据并详细解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
ajax,动态加载,json数据
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
