根据 API 学习本章
使用 ajax 发送表单到 servlet, 发送时显示等待图片, servlet 处理完返回信息, 在页面显示返回信息, 并且隐藏等待图片
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>My JSP 'ajax.jsp' starting page</title>
- <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#submit").click(
- function() {
- var param = {
- name : $("#name").val(),
- age : $("#age").val()
- };
- $.ajax({
- type : "GET",
- url : "oneServlet",
- cache : false,
- data : param,
- beforeSend : function() {// 在发送请求之前触发的事件
- $("img").show();
- },
- complete : function() {// 在发送请求完成之后触发的事件
- $("img").hide();
- },
- success : function(data) {// 在请求成功后触发的事件
- alert(data);
- },
- error : function(XMLHttpRequest, textStatus, errorThrown) {// 在请求失败时候触发
- alert(XMLHttpRequest.status + "" + textStatus +" "+ errorThrown);
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <form>
- <table>
- <tr><td align="right">user name:</td><td><input type="text" id="name"></td></tr>
- <tr><td align="right">age:</td><td><input type="text" id="age"></td></tr>
- <tr><td></td><td><input type="button" id="submit" value="submit"></td></tr>
- </table>
- <img src="img/wait.gif" style="display:none">
- </form>
- </body>
- </html>
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- request.setCharacterEncoding("UTF-8");
- /*try {
- Thread.sleep(5000);
- } catch (InterruptedException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }*/
- response.setContentType("text/html;charset=UTF-8");
- PrintWriter out = response.getWriter();
- String name=request.getParameter("name");
- String age=request.getParameter("age");
- out.print(name+" "+age);
- out.flush();
- out.close();
- }
jQuery 中 ajax 的应用
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(function(){
- $("button:eq(0)").click(function(){
- var param={"name":"张三","age":"33" };
- $.get("oneServlet",param,function(data){
- alert(data);
- });
- });
- $("button:eq(1)").click(function(){
- $.getJSON("json/name.json",function(data){
- alert(data);
- for(var i=0;i<data.length;i++){
- var map=data[i];
- alert(map.name+" "+map.age);
- }
- });
- });
- $("button:eq(2)").click(function(){
- $.getScript("js/aa.js");
- });
- $("button:eq(3)").click(function(){
- var param={"name":"张三","age":33 };
- $.post("oneServlet",param,function(data){
- alert(data);
- });
- });
- $("button:eq(4)").click(function(){
- $("div").load("index.jsp");
- });
- });
- </script>
- </head>
- <body>
- <button>get</button><br>
- <button>getJSON</button><br>
- <button>getScript</button><br>
- <button>post</button><br>
- <button>load</button><br>
- <div></div>
- </body>
- </html>
其中:
- son/name.json
- [{
- "name":"zhangsan",
- "age":"22"
- },{
- "name":"wangwu",
- "age":"33"
- },{
- "name":"lisi",
- "age":"44"
- }]
- js/aa.js
- alert("aaaaaaaaaa");
来源: http://www.bubuko.com/infodetail-2583721.html