JQuery異步請求之$.ajax()

時間 2021-08-15

標籤 html java jquery ajax 異步 jsp ide 函數 this 欄目 JQuery 简体版

原文原文鏈接

AJAX各類實現方式html

JQuery異步請求之$.ajax(）java

GET請求jquery

POST請求ajax

AJAX各類實現方式

JQuery異步請求之$.ajax()

GET請求

例子：單擊某個按鈕，異步請求servlet,而後把響應內容返回給div異步

jsp代碼jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>js原生異步</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        input{
            width:300px;
            height: 50px;
            background-color:burlywood ;
        }
        div{
            width:300px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        function myClick() {
            $.ajax({
                url:"demo1" ,
                type:"GET",
                data:{
                   "name":"林不渣",
                    "age":27,
                    "remarks":"沒有女友"
                },
                success:function(data){
                    $("#div").html(data)
                }
            })
        }
    </script>
</head>
<body>
    <input type="button" value="單擊我觸發請求" onclick="myClick();" > <br><br><br>
    <div id="div">

    </div>
</body>
</html>

servlet的demo1代碼ide

package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

/**
 * @author 林高祿
 * @create 2020-08-07-14:58
 */
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer =  response.getWriter();
        Map<String, String[]> parameterMap = request.getParameterMap();
        for(String[] sArr:parameterMap.values()){
            for(String s:sArr){
                writer.write("<h1>"+s+"</h1>");
            }
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

啓動訪問，單擊按鈕前函數

單擊按鈕後ui

POST請求

例子：單擊某個按鈕，異步請求servlet,而後把響應內容返回給divthis

jsp代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>js原生異步</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        input{
            width:300px;
            height: 50px;
            background-color:burlywood ;
        }
        div{
            width:300px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        function myClick() {
            $.ajax({
                url:"demo1" ,
                type:"POST",
                data:{
                   "name":"林大帥",
                    "age":27
                },
                success:function(data){
                    $("#div").html(data)
                }
            })
        }
    </script>
</head>
<body>
    <input type="button" value="單擊我觸發請求" onclick="myClick();" > <br><br><br>
    <div id="div">

    </div>
</body>
</html>

servlet的demo1代碼

package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @author 林高祿
 * @create 2020-08-07-14:58
 */
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer =  response.getWriter();
        writer.write("<h1>"+name+"</h1>");
        writer.write("<h1>"+age+"</h1>");

    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}