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

效果图

jsp代码

形式姓名：输入名称='name '类型='text'/年龄：输入名称='年龄'类型='text'/输入类型='按钮'类='get '值='get '提交/input type=' button ' class=' post ' value=' post '提交/input type=' button ' class=' Ajax ' value=' Ajax '提交//表单div id='box'/divservlet代码

//获取公共void doGet(Httpservletrequest请求，HttpServletResponse响应)引发ServletException，IOException { response。setcontenttype(' text/html ')；回应。setcharacter encoding(' utf-8 ')；回应。setcontenttype(' text/html；charset=utf-8 ')；字符串名称=请求。getParameter(' name ')；字符串年龄=请求。GetParameter(' age ')；if (name==null || name=='') { name='测试名字“管理员”；} if (age==null || age=='') { age='测试年龄100';}用户用户=新用户(1、姓名、年龄);PrintWriter out=响应。getwriter()；JSON对象JSON对象=JSON对象。来自对象(用户);出去。print(JSonobj)；出去。flush()；出去。close()；}//post public void doPost(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException {//响应。setcontenttype(' text/html ')；请求。setcharacter encoding(' utf-8 ')；回应。setcharacter encoding(' utf-8 ')；回应。setcontenttype(' text/html；charset=utf-8 ')；字符串名称=请求。getParameter(' name ')；if (name==null || name=='') { name='测试名字“管理员”；}字符串年龄=请求。GetParameter(' age ')；if (age==null || age=='') { age='测试年龄100';}用户用户=新用户(1、姓名、年龄);PrintWriter out=响应。getwriter()；JSON对象JSON对象=JSON对象。来自对象(用户);出去。print(JSonobj)；出去。flush()；出去。close()；}JS核心代码

脚本类型=' text/JavaScript '//get $(document).ready(function() { $('form .get ').单击(函数(){ $).get('ajaxServlet '，函数（响应，状态，xhr){ var DataObj=eval('(' response '))；$('#box ').html(响应);警报(DataObj。姓名)；});});//post $('表单《邮报》).单击(函数(){ $).帖子(' ajaxServlet '，函数（响应，状态，xhr){ var DataObj=eval('(' response '))；$('#box ').html(响应);});});//ajax $('form .Ajax ').单击(function(){ alert($('[name=' name ']').val())；$.ajax({ type:'get '，url:'ajaxServlet '，数据： { name : $('[name=' name ']').val()，age:$('[name='age']').val() }，success:function(响应，状态，xhr){ $('#box ').html(响应);} });});});/script以上这篇创建交互式、快速动态网页应用的网页开发技术动态加载数据数据并详细解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。