使用jquery 的ajax 與 Java servlet的交互

時間 2019-11-24

標籤使用 jquery ajax java servlet 交互欄目 JQuery 简体版

原文原文鏈接

因爲是使用jquery的因此別忘記導入jq javascript

下面是jsp文件html

<%@ 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>Insert title here</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function ajaxFun(){
            $.ajax({
                type: "POST",                            //傳數據的方式
                url: "user",                             //servlet地址

                data: $('#form').serialize(),            //傳的數據  form表單 裏面的數據
                success: function(result){               //傳數據成功以後的操做   result是servlet傳過來的數據  這個函數對result進行處理，讓它顯示在 輸入框中
                    $("#results").val(result);           //找到輸入框 而且將result的值 傳進去
                }
            });
        }

    </script>
</head>
<body>
<H1 align="center">請輸入兩個字符串</H1>
<div align="center">
    <form id="form">
        first:<input type="text" name="first" id="first">
        second:<input type="text" name="second" id="second">
　　　　　//點擊按鈕的時候觸發屬性
        <button type="button" onclick="ajaxFun()">button</button> //提交 按鈕
    </form>
    <input type="text" id="results">
    // 用來 顯示 result
</div>
</body>
</html>

　　而後是 servlet 文件前端

package com.java.servlet;

import java.io.IOException;
import java.io.PrintWriter;

/**
 * Ajax 訓練
 * */
public class UserServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();

        String first = request.getParameter("first");           //從前端獲取數據first
        String second = request.getParameter("second");         //從前端獲取數據second
        String result=first+second;
        System.out.println(result);                                      //用於測試 ，判斷是否成功獲取到數據；
        out.println(result);                                                 //將數據傳到前端


    }
}