使用Java编程语言和Ajax技术完成前端页面与服务器端代码的通信,给出测试用例
时间: 2024-05-06 10:20:20 浏览: 19
以下是示例代码:
前端页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitBtn").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
url: "server.php",
method: "POST",
data: {name: name, email: email, message: message},
success: function(response){
alert("Message sent successfully!");
$("#name").val("");
$("#email").val("");
$("#message").val("");
},
error: function(xhr, textStatus, errorThrown){
alert("Error occurred while sending message!");
}
});
});
});
</script>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="button" id="submitBtn" value="Send">
</form>
</body>
</html>
```
服务器端代码:
```java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Server extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String email = request.getParameter("email");
String message = request.getParameter("message");
// Do something with the data received from the client
// For example, send an email to the company's customer service department
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("Message sent successfully!");
}
}
```
测试用例:
1. 输入姓名、电子邮件和消息,单击“发送”按钮,应弹出“消息发送成功!”的警报框。
2. 输入无效的电子邮件地址,单击“发送”按钮,应弹出“发送消息时发生错误!”的警报框。
3. 输入无效的姓名或消息,单击“发送”按钮,应弹出“消息发送成功!”的警报框。