• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ajax动态加载json数据并详细解析

    效果图

    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解析(示例分析)
    上一篇:Ajax获取php返回json数据动态生成select下拉框的实例
    下一篇:layui Ajax请求给下拉框赋值的实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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