jQuery AJAX

1、jQuery AJAX简介

在这里插入图片描述

2、get和post请求

jQuery AJAX_第1张图片

3、$.ajax()

在这里插入图片描述

4、示例代码

get.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style type="text/css">
        #time,#res{
      
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    style>

head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript">script>
    <script type="text/javascript">
        $(function () {
      
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
      
                $.get("get",function (data) {
      
                    $("#res").html(data);
                });
            });
        });
    script>

    <button id="btn">get请求button>
    <div id="time">div>
    <div id="res">div>

body>
html>
post.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style type="text/css">
        #time,#res{
      
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    style>

head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript">script>
    <script type="text/javascript">
        $(function () {
      
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
      
                $.post("post",{
      name:'zs',age:25},function (data) {
      
                    $("#res").html(data);
                });
            });
        });
    script>

    <button id="btn">post请求button>
    <div id="time">div>
    <div id="res">div>

body>
html>
ajax.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style type="text/css">
        #time,#res{
      
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    style>

head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript">script>
    <script type="text/javascript">
        $(function () {
      
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
      
                $.ajax(
                    {
      
                        url:"post",
                        data:{
      name:'lisi',age:'30'},
                        type:'post',
                        success:function (data) {
      
                            $("#res").html(data.res);
                        },
                        dataType:'json'
                    }
                )
            });
        });
    script>

    <button id="btn">ajax请求button>
    <div id="time">div>
    <div id="res">div>

body>
html>
GetTest.java
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class GetTest {
     
    @WebServlet(value = "/get")
    public class PostTest extends HttpServlet {
     
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     
            PrintWriter printWriter=resp.getWriter();
            printWriter.write("hello ajax!!");
        }
    }

}

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

@WebServlet(value = "/post")
public class PostTest extends HttpServlet {
     
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     
        String name=req.getParameter("name");
        String age=req.getParameter("age");
        String json="{\"res\":\"success\"}";
        PrintWriter printWriter=resp.getWriter();
        printWriter.write(json);

    }
}

你可能感兴趣的:(Java,ajax,jquery,js)