在前端開發中,經常需要使用ajax來實現動態交互。而JSP(JavaServer Pages)作為一種動態網頁技術,可以方便地與ajax配合使用,以實現各種功能。其中,一個常見的應用場景是開發一個計算器。
假設我們需要實現一個簡單的計算器,用戶可以輸入兩個數字,并選擇要進行的計算操作,比如加法、減法、乘法和除法。通過ajax請求,將用戶的操作傳遞給后臺的JSP頁面,然后在前端頁面中展示計算結果。
首先,我們可以先創建一個HTML表單,包含兩個輸入框和一個下拉菜單,用于用戶輸入數字和選擇計算操作。
<form id="calculatorForm"> <input type="text" id="num1" name="num1" placeholder="請輸入第一個數值"> <input type="text" id="num2" name="num2" placeholder="請輸入第二個數值"> <select id="operator" name="operator"> <option value="add">加法</option> <option value="subtract">減法</option> <option value="multiply">乘法</option> <option value="divide">除法</option> </select> <input type="button" value="計算" onclick="calculate()"> </form>
接著,我們需要編寫ajax請求函數來處理用戶輸入和發送請求給JSP頁面。
function calculate() { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; var operator = document.getElementById("operator").value; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("result").innerHTML = this.responseText; } }; xhttp.open("GET", "calculator.jsp?num1=" + num1 + "&num2=" + num2 + "&operator=" + operator, true); xhttp.send(); }
在上述代碼中,我們首先獲取用戶輸入的數值和操作符。然后,使用XMLHttpRequest對象創建一個異步請求,并設置回調函數來處理返回的結果。在回調函數中,我們將返回的結果賦值給id為"result"的HTML元素,在前端頁面中展示計算結果。
接下來,我們可以編寫calculator.jsp頁面來處理請求,并進行計算。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% int num1 = Integer.parseInt(request.getParameter("num1")); int num2 = Integer.parseInt(request.getParameter("num2")); String operator = request.getParameter("operator"); int result = 0; if (operator.equals("add")) { result = num1 + num2; } else if (operator.equals("subtract")) { result = num1 - num2; } else if (operator.equals("multiply")) { result = num1 * num2; } else if (operator.equals("divide")) { result = num1 / num2; } out.println(result); %>
在calculator.jsp中,我們首先獲取請求中的num1、num2和operator參數,并將它們解析為整型。接著,根據傳遞過來的operator參數進行不同的計算操作,并將結果輸出。
通過上述代碼,我們已經實現了一個簡單的計算器。用戶可以通過輸入兩個數值和選擇操作符,實時計算結果。這個例子展示了ajax和JSP的配合使用,用于實現動態交互的功能。