zoukankan      html  css  js  c++  java
  • ajax 异步请求,json前台后台交互

    直接上例子!

    第一例:$.getJSON()

    1.导入json的相关jar包

    2.后台servlet代码

    public class ajaxtest extends HttpServlet {
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
         //上面是处理乱码的 String[] str
    = {"张三","李四","王五"}; //最普通的json数组结构 JSONArray json = JSONArray.fromObject(str); //string转json结构 PrintWriter out = response.getWriter();   out.print(json); //response 将json输出到客户端。
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
    }
    }

    前端jsp页面

    <script type="text/javascript"
        src="http://libs.cdnjs.net/jquery/3.2.1/jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
      $("#b01").click(function(){
          $.getJSON("${pageContext.request.contextPath}/ajaxtest",function(result){
              $.each(result,function(i,field){
                  $("#myDiv").append(field+":");
              });
          });
      });
      });
    </script>
    
    
    
    </head>
    
    <body>
    
    <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
    <button id="b01" type="button">改变内容</button>

    点击按钮的结果:张三:李四:王五。

    ----------------------------------------------------------

    第二例 :$.ajax()

      后台 servlet不变

    jsp前端页面:

    <script type="text/javascript">
    $(document).ready(function(){
      $("#b01").click(function(){
          $.ajax(
          {
              url:"${pageContext.request.contextPath}/ajaxtest",
              dataType:"json",
              success:function(result){
                  $.each(result,function(i,fireld){
                      $("#myDiv").append(fireld+":");
                  });
              }
          });
      });
      });
    </script>
    </head>
    <body>
    <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
    <button id="b01" type="button">改变内容</button>

    点击后的结果:张三:李四:王五:

    ----------------------------------------------------

     第三例:

  • 相关阅读:
    jsoncpp使用
    java学习笔记12--国际化
    java学习笔记13--比较器(Comparable、Comparator)
    java学习笔记15--引用传递
    java学习笔记16--异常
    Java学习笔记——File类之文件管理和读写操作、下载图片
    java学习笔记3
    我的二十一天CoreJava 学习笔记
    大数据处理方面的 7 个开源搜索引擎
    GridView编辑删除操作
  • 原文地址:https://www.cnblogs.com/pxffly/p/8440068.html
Copyright © 2011-2022 走看看