jsp+ajax+servlet页面的提交，接收，显示数据流程
最近想写一些偏基础性的文章，主要是因为，有一些学弟学妹们可能基础比较薄弱，于是我把一些常用功能但是又容易混淆的地方单独挑出来说说，当然也是方便回顾一下知识。
一般来说，业务开发有一些场景是：
比如
- 前台发起一个数据请求，然后后台接收，到数据库查询到数据了，然后这时候数据怎么返回给前台页面呢？前台页面怎么接收这些数据呢？接收到这些数据以后怎么显示这些数据呢？
- 前台需要上传一张图片/文件，然后这个图片或是文件上传到后台以后，后台做处理，完了以后需要反馈一些数据信息回来，数据怎么返回给前台页面呢？前台页面怎么接收这些数据呢？接收到这些数据以后怎么显示这些数据呢？
1.ajax回显数据例子
一般来说，前端提交数据，采用两种方式：form表单和ajax异步提交。二者差别请看这里。
两种方式都可以提交数据到后台，但是，如果你想后台数据返回到当前的提交页面来显示，就需要使用ajax方式。
因为ajax可以异步刷新，再不刷新整个页面的情况下，把处理后的数据回显到当前页面上来。
首先前端是一个input：
然后button按钮触动sub函数，发出ajax提交请求：
规定数据类型为 dataType:“json”,
提交方式为：type:“post”,
设置提交的后台URL：url:“TestServlet”,
然后数据就会提交到TestServlet后台：
后台开始做对应的处理，
然后使用json对象或json数组，
JSONObject json=new JSONObject();
JSONArray array=new JSONArray();
Json对象存放键值对：
temp1.put(“name”, “张三”);
json数组存放json对象：
array.put(0,temp1);
//json对象存放最终的数组以键值对形式。
json.put(“people”, array);
最后使用response.getWriter().println(json); //向前台的页面输出结果
本例子源码：
<script type="text/javascript" src="static/js/jquery-3.2.1.js" ></script>
<h2 style="text-align:center;">1.ajax回显数据例子<br> </h2>
<input type="button" value="点击获取结果" id="btn" onclick="sub()" style="margin: 24px 0 30px 45%;">
<br>
<div style="margin: 0px 0 30px 42%;">后台回显的json数据 : </div>
<div id="Result" style="margin: 0px 0 0px 45%;"></div>
<br>
<script type="text/javascript">
//ajax回显数据
function sub(){
$.ajax({
dataType:"json", //数据类型为json格式
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
type:"post",
url:"TestServlet",
statusCode: {
404: function() {
alert('提交地址url未发现。 ');
}
},
success:function(data,textStatus){
//alert(data);//对象
alert("返回状态："+textStatus);//状态
$("#Result").html("<table border='1'><tr><td>序号</td><td>姓名</td><td>年龄</td></tr>"+
"<tr><td>"+data.people[0].id+"</td><td>"+data.people[0].name+"</td><td>"+data.people[0].age+"</td>"+
"<tr><td>"+data.people[1].id+"</td><td>"+data.people[1].name+"</td><td>"+data.people[1].age+"</td></tr></table>");
}
});
}
</script>
后台（本文的所以例子，后台都是这个。）：
package com.zout;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
*
* @Title: TestServlet.java
* @Package:com.zout
* @Description:(作用):org.json依赖json-20140107.jar 返回json数据
* @author:Zoutao
* @date:2018年11月8日
* @version:V1.0
*/
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-type","text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
//json在这里存放的是数组信息
JSONObject json=new JSONObject();
JSONArray array=new JSONArray();
//两个数据
JSONObject temp1=new JSONObject();
JSONObject temp2=new JSONObject();
try {
//第一个name和sex
temp1.put("id", 1);
temp1.put("name", "张三");
temp1.put("age", "23");
array.put(0,temp1);
//第二个name和sex
temp2.put("id", 2);
temp2.put("name", "李四");
temp2.put("age", "33");
array.put(1,temp2);
//json对象存放最终的数组以键值对形式。
json.put("people", array);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//向前台的页面输出结果
PrintWriter out=response.getWriter();
out.println(json);
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-type","text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
doGet(request,response);
out.flush();
out.close();
}
public TestServlet() {
super();
}
public void destroy() {
super.destroy();
}
}
接收图：
效果图：
注意哟，这是直接回显数据到了当初提交请求的页面。而没有跳转到另外的页面去。
2.form表单提交数据的错误写法
如图：
函数是：
像图片中这样是错误的做法。
首先，如果使用ajax提交：那么是通过提交按钮来，触发函数，然后发起ajax请求。
上传
按钮触发，发起ajax请求。
比如这样:
所以说，要注意form表单提交和ajax提交的两种在input地方的type不同的写法，一个是type=“submit”，一个是type=“button”；
3.ajax上传文件异步当前页面显示数据
3.1 ajax上传文件，数据返回到当前页
这种需要一般来说是针对一那种需要显示处理信息的功能。
前端页面：
<h2 style="text-align:center;">3.ajax上传文件数据到当前页<br> </h2>
<!-- 单文件上传,没有使用插件 -->
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file" style="margin: 0 0 0 40%;"/>
</form>
//注意哟，触发按钮是放在表单的外层，而且是button按钮
<button id="upload" style="margin: 0 0 0 40%;">上传</button>
然后js：
//单文件
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "TestServlet",
data: formData,
cache: false,
processData: false,
contentType: false,
async:false,
success:function(data,textStatus) {
alert("单文件测试："+data);
document.getElementById("Result").innerHTML=data;
},
});
});
});
这里通过upload按钮id触发ajax请求，发给TestServlet后台处理：
TestServlet.java参考最上面那个。
最后通过response.getWriter().println(json); 带回json数据。
这里就需要注意，如果你的发起请求的地方，不是带有回显函数，那么页面可以设置跳转到其他jsp页面去，如果像ajax一样有回显函数，那么就会返回到原页面去了。
前端的 success:function(data,textStatus) 接收数据。
到这里，我们目前就是做了前端ajax上传文件到后台，后台处理完带有json数据返回前端，前端通过回显函数接收到处理完成的json数据。
3.2 当前页显示接收到的数据
前端通过回显函数接收到处理完成的json数据以后，我们要把它显示出来，这里说两种方式：
- 采用给div添加一个id属性 如：
<div id="Result"></div>
然后js利用：
document.getElementById("Result").innerHTML= <你获得的数据>;
来吧数据显示在Result这个div里面。
或者通过采用.html的方式从写一个html界面。：
$("#Result").html("<table border='1'><tr><td>序号</td><td>姓名</td><td>年龄</td></tr>"+
"<tr><td>"+data.people[0].id+"</td><td>"+data.people[0].name+"</td><td>"+data.people[0].age+"</td>"+
"<tr><td>"+data.people[1].id+"</td><td>"+data.people[1].name+"</td><td>"+data.people[1].age+"</td></tr></table>");
效果图：
内嵌html的方式：
到这里顺便提一句：如果要实现form表单的多文件上传就是要在input的地方，添加：
**multiple=“multiple”**属性，然后多个input来一次性提交。
4.关于后台发回数据和前台显示的方式：
一般来说，ajax或者form表单通过URL提交到后台，后台去查询也好更新也好，反正就是做一系列操作以后，通常带有json格式的数据，或者我们想带回json数据回到前台。
比如这样：
那么关于数据到底是回显到我们当初提交的页面去还是回显到其他页面去？
最后，当数据返回来了以后，现在先不管是什么格式的数据。
反正就是后台返回来了，然后前台页接收到了，需要把它显示出来？
-
如果当初提交的页面A发起的请求，是带有回显函数的，那么可以回显发起请求的页面去。
比如ajax，的 success:function(data,textStatus) {}拿到回显的数据。 -
如果当初提交的页面A发起的请求，没有回显函数或者是数据格式有要求，比如前台要求是json，而后台没有返回json格式数据，那么就可以选择携带数据并且重定向到其他页面B去。然后页面A再去加载页面B。
一般来说，后台通过：
PrintWriter out = response.getWriter();
out.println(json);
//json里面是含有键值对的json格式的字符串。
这是直接返回到最初提交请求页面去。
或者是比如数据不是json，是其他类型：
//注入返回的消息-键值对
request.setAttribute("message",name);
然后一般这种情况都是要显示到另外一个页面B去
// 跳转到 message.jsp
request.getRequestDispatcher("message.jsp").forward(request,response);
然后message.jsp显示出这个注入的信息：
<!-- 显示数据div -->
<div style="font-size:20px;
font-weight:bold;
color:yellow;
text-align:center;
background-color:#2a4a67" id="imagediv"> ${message }
</div>
这样就实现了把接收到的数据显示的样子。
5. 总结
说来说去都是一些简单的例子，直接总结一下。
-
form表单提交和ajax提交不一样，form表单设置type=“submit”，ajax通过button的id来触发click()函数，然后发起ajax提交。其次，form的提交input写在表单里面。ajax的button写在表单外面。
-
数据发送到后台以后，后台通过 PrintWriter对象out来写入数据，带回。
-
数据从后台带回的时候，如果不指定跳转页面，那么就发送到最初的提交页面的回显函数那里去，然后通过加载到指定div去显示出来。
-
数据从后台带回的时候，如果指定跳转页面，那么就采用 request.setAttribute注入或者是model等带回数据，并且重定向到另外的jsp页面去。然后显示出来。
-
前端页面通过回显函数接收后台的数据，或者不通过回显函数，直接从后台跳转到其他页面去。然后前端都能接收到数据。
-
最后通过异步加载div模块或者是重构html页面的方式显示这些返回的数据。
以上内容就是一些的jsp+ajax+servlet页面的提交，接收，显示数据流程，不管怎样，万丈高楼平地起，现在很多同学盲目追求所谓的开发框架，而忘记了很多底层的基础知识，包括我本人也是，温故而知新，一点进步一点。
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
