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>

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

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

     第三例:

  • 相关阅读:
    jq 换图片路径
    sql 把一列的数据按逗号分隔转换成多行
    sql 数据库查看主外键关联
    sql 表连接 join
    sql 查看 锁定的表 或者 未提交 的事务
    WMI技术介绍和应用——查询硬件信息
    System.Web.HttpContext.Current.Server.MapPath("~/upload/SH") 未将对象引用设置为实例对象
    sql server output用法说明
    merge into 的用法
    JAVA Stop The World 第八节
  • 原文地址:https://www.cnblogs.com/pxffly/p/8440068.html
Copyright © 2011-2022 走看看