ajax 异步请求，json前台后台交互

时间 2020-06-20

标签 ajax 异步请求 json 前台后台交互栏目 Ajax 繁體版

原文原文链接

直接上例子！javascript

第一例：$.getJSON()html

1.导入json的相关jar包前端

2.后台servlet代码java

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页面jquery

<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

----------------------------------------------------------json

第二例 :$.ajax()数组

　　后台 servlet不变app

jsp前端页面：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>

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

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

第三例: