javaAjax请求

最新推荐文章于 2023-03-29 18:40:36 发布

快落靓仔

最新推荐文章于 2023-03-29 18:40:36 发布

阅读量7.6k

点赞数

本文链接：https://blog.csdn.net/qq_42923605/article/details/116894954

版权

1.html导入jqruey的包
2.创建servlet类
3.web.xml中进行配置
4.代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // ajax请求
            $("#ajaxBtn").click(function () {
                $.ajax({
                    //url是请求的url地址不带后面的action之类的
                    url: "http://localhost:8080/json_ajax/ajaxServlet",
                    //data后跟的是url后面的参数 得到的结果就是http://localhost:8080/json_ajax/ajaxServlet?action=jQueryAjax
                    data: {action: "jQueryAjax"},
                    //type是请求的方式
                    type: "GET",
                    //success是请求成功的函数  data  表示得到的返回参数
                    success: function (data) {
                        $("#msg").html("ID：" + data.id + "  姓名： " + data.name);
                    },
                    //这样的话可以直接得到json字符串
                    //dataType 这里设置函数返回的data数据的类型  有  text  json xml  一般都是用text  json
                    dataType: "json"
                });
            });

            // ajax--get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/json_ajax/ajaxServlet", "action=jQueryGet", function (data) {
                    $("#msg").html("get  ID：" + data.id + "  姓名： " + data.name);
                }, "json");
            });

            // ajax--post请求
            $("#postBtn").click(function () {
                // post请求
                $.post("http://localhost:8080/json_ajax/ajaxServlet", "action=jQueryPost", function (data) {
                    $("#msg").html("post  ID：" + data.id + "  姓名： " + data.name);
                }, "json");

            });

            // ajax--getJson请求  得到的就是json字符串
            $("#getJSONBtn").click(function () {
                // 调用
                $.getJSON("http://localhost:8080/json_ajax/ajaxServlet", "action=jQueryJson", function (data) {
                    $("#msg").html("jQueryJson  ID：" + data.id + "  姓名： " + data.name);
                });

            });

            // ajax请求
            $("#submit").click(function () {
                //得到表单的内容  形成  name=value 的形式
               alert($("#form01").serialize()) ;
                // 把参数序列化
                $.getJSON("http://localhost:8080/json_ajax/ajaxServlet", "action=jQuerySerialize&"+$("#form01").serialize(), function (data) {
                    $("#msg").html("jQuerySerialize  ID：" + data.id + "  姓名： " + data.name);
                });
            });

        });
    </script>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg"></div>
<br/><br/>
<form id="form01">
    用户名：<input name="username" type="text"/><br/>
    密码：<input name="password" type="password"/><br/>
    下拉单选：<select name="single">
    <option value="Single">Single</option>
    <option value="Single2">Single2</option>
</select><br/>
    下拉多选：
    <select name="multiple" multiple="multiple">
        <option selected="selected" value="Multiple">Multiple</option>
        <option value="Multiple2">Multiple2</option>
        <option selected="selected" value="Multiple3">Multiple3</option>
    </select><br/>
    复选：
    <input type="checkbox" name="check" value="check1"/> check1
    <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
    单选：
    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>

Servlet代码：

package com.xzh.servlet;

import com.google.gson.Gson;
import com.xzh.pojo.Person;

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

/**
 * @Author XuZhuHong
 * @CreateTime 2021/5/15 21:45
 */
//extends BaseServlet是自己写的一个把从请求中的到的方法名提取出来调用的方法
public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("javaScriptAjax 来了");
        Person person = new Person(1, "javaScriptAjax来了");
        String persontoJson = gson.toJson(person);
        //这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }

    protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("jqueryAjax 来了");
        Person person = new Person(1, "javaScriptAjax来了");
        String persontoJson = gson.toJson(person);
//这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }

    protected void jQueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("jQueryGet 来了");
        Person person = new Person(1, "javaScriptAjax来了");
        String persontoJson = gson.toJson(person);
//这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }

    protected void jQueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("jQueryPost 来了");
        Person person = new Person(1, "javaScriptAjax来了");
        String persontoJson = gson.toJson(person);
//这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }

    protected void jQueryJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("jQueryJson 来了");
        Person person = new Person(1, "javaScriptAjax来了");
        String persontoJson = gson.toJson(person);
//这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }

    protected void jQuerySerialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Gson gson = new Gson();
        System.out.println("jQuerySerialize     来了");
        System.out.println("username：   " + request.getParameter("username"));
        System.out.println("username：   " + request.getParameter("password"));
        System.out.println("single： " + request.getParameter("single"));
        System.out.println("multiple：   " + request.getParameter("multiple"));
        String[] checks = request.getParameterValues("check");
        for (String check : checks) {
            System.out.println("check：    " + check);
        }
        System.out.println("radio：  " + request.getParameter("radio"));
        Person person = new Person(1, "jQuerySerialize 来了");
        String persontoJson = gson.toJson(person);
//这一句就是返回给Ajax函数数据的代码
        response.getWriter().write(persontoJson);
    }


}

父类代码：

package com.xzh.servlet;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public abstract class BaseServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

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

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 解决post乱码问题，设置请求的参数字符集为UTf-8
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		// action参数就可以用来判断是当前用户模块的哪一个操作。
		String action = request.getParameter("action");
		// 定义一个Method方法对象
		Method actionMethod;
		try {
			// 通过反射获取到与action字符串对应的操作方法
			actionMethod = getClass().getDeclaredMethod(action, HttpServletRequest.class,
					HttpServletResponse.class);
			// System.out.println(actionMethod);
			// 调用Method对象的invoke函数执行方法
			actionMethod.invoke(this, request, response);
		} catch (NoSuchMethodException | SecurityException | IllegalAccessException
				| IllegalArgumentException | InvocationTargetException e) {
			e.printStackTrace();
		}

	}

}