jQuery中的Ajax应用

ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 使用ajax发送表单到servlet，发送时显示等待图片，servlet处理完返回信息，在页面显示返回信息，并且隐藏等待图片 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax.jsp</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",
                data:param,
                url:"../../OneServlet",
                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>
    <table>
        <tr><td align="left">user name:</td><td><input type="text" id="name"></td></tr>
        <tr><td align="left">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 style="display: none;" src="../../image/)QVV0UZDG]GJ~YW756[B{`C.png">
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>OneServlet</servlet-name>
    <servlet-class>com.inspur.servlet.OneServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>OneServlet</servlet-name>
    <url-pattern>/OneServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

OneServlet .java

package com.inspur.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class OneServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(name +":"+ age);
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

JQuery中的ajax应用.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery中的ajax应用.jsp</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        $("button:eq(0)").click(function(){
            $.get("../../OneServlet",{name:"yang",age:"20"},function(data){
                alert("Data Loaded:" + data);
            });
        });
        $("button:eq(1)").click(function(){
            $.post("../../OneServlet",{name:"yang",age:"20"},function(data){
                alert("Data Loaded:" + data);
            });
        });
        $("button:eq(2)").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(3)").click(function(){
            $("div").load("../01/helloword.html");
        });
        $("button:eq(4)").click(function(){
            $.getScript("../../js/aaa.js");
        });
    });
</script>
</head>
<body>
    <button>get</button>
    <button>post</button>
    <button>getJSON</button>
    <button>load</button>
    <button>getScript</button>
    <div style="width: 200px;height: 200px;border: 1px solid black"></div>
</body>
</html>

name.json

[{ 
    "name":"Bill",
    "age":"13" 
    },
    
    { 
    "name":"Bi",
    "age":"12" 
    },
    
    { 
    "name":"Bil",
    "age":"11" 
}]

aaa.js

alert("你好！ ");

猜你喜欢