欢迎任何形式的转载，但请务必注明出处。
本章内容来自YouTube需*（点击进入视频学习）
服务器配置等可以参看我其他文章。注释等后续再加
效果图
结构
<body>
<fieldset>
<ledend>Demo 1</ledend>
<form>
Name <input type="text" id="fullname">
<input type="button" value="Hello" id="bttHello">
<br>
<span id="result1"></span>
</form>
</fieldset>
<fieldset>
<ledend>Demo 2</ledend>
<form>
Number 1<input type="text" id="number1"><br>
Number 2<input type="text" id="number2"><br>
Result<span id="result2"></span><br>
<input type="button" value="Sum" id="bttSum">
</form>
</fieldset>
</body>
body部分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Ajax</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bttHello').click(function() {
var fullname = $('#fullname').val();
$.ajax({
type: 'POST',
data: {
fullname: fullname,
action:'demo1'
},
url: 'AjaxController',
success: function(result) {
$('#result1').html(result);
}
});
});
$('#bttSum').click(function() {
var number1 = $('#number1').val();
var number2 = $('#number2').val();
$.ajax({
type: 'POST',
data: {
number1:number1,
number2:number2,
action:'demo2'
},
url: 'AjaxController',
success: function(result) {
$('#result2').html(result);
}
});
});
});
</script>
</head>
Ajax部分
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
if(action.equals("demo1")){
String fullname = request.getParameter("fullname");
out.print("Hello"+fullname);
}
else if(action.equals("demo2")){
int number1 = Integer.parseInt(request.getParameter("number1"));
int number2 = Integer.parseInt(request.getParameter("number2"));
out.println(number1+number2);
}
}
Servlet部分