您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:51:16
  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代码

//getpublic 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(); }
//postpublic 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数据并详细解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持51zixue.net。


下载地址:
Ajax获取php返回json数据动态生成select下拉框的实例
layui Ajax请求给下拉框赋值的实例
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。