色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

ajax jsp 計算器

馮子軒1年前7瀏覽0評論

在前端開發中,經常需要使用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的配合使用,用于實現動態交互的功能。