ajax提交form表單,使用FormData。JQuery3.2
阿新 • • 發佈:2019-01-06
FormData這種用ajax提交form的方式在老版的JQ中是不行,我使用的是3.2版本,程式碼如下
<form id="formTest" action="ajaxTe" method="post" enctype="multipart/form-data">
<input id="id" name="id" placeholder="id">
<input id="name" name="name" placeholder="name"><br><br>
<input id="age" name="age" placeholder="age">
true:<input id="state" name="state" type="radio" value="true">
false:<input id="state2" name="state" type="radio" value="false"><br><br>
<input id="file" name="file" type="file"><br><br>
<!-- <input type="submit" value="form提交"> -->
</form>
<input id="ajaxbut" type="button" value="ajaxForm">
使用FormData方式,檔案可以用request.getParts()獲得到,這是servlet3.0的新特性.(欄位引數在request.getParameter(“xx”)可以獲得到)
Collection< Part > prats = req.getParts();
<script type="text/javascript">
$("#ajaxbut").click(function(){
//這裡為啥是$("#formTest")[0]呢,因為用JQ獲得的物件轉DOM就是用這個方式
//如果用 document.getElementById("formTest")就不用這樣
//意思就是jquery物件再[0]一下是取其相對應的Dom物件
//即$("#formTest")[0] = document.getElementById("formTest")
var form = new FormData($("#formTest")[0]);
$.ajax({
url:"ajaxTe",
type:"POST",
data:form,
dataType:'json', //返回的資料格式:json/xml/html/script/jsonp/text
processData:false,
contentType:false,
success:function(data){
$("#sysout").append("<lable>"+"id--" + data.id + ", name--" + data.name + ", age--" + data.age + ", state--" + data.state +"</lable><br>");
},
error:function(data){
alert("錯誤!!");
}
});
})
</script>
java後臺是個簡單的servlet
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPostdoPost");
User user = new User();
try {
//用了BeanUtils工具,是使用反射的方式把傳回來的form表單欄位和實體類對映
BeanUtils.populate(user, req.getParameterMap());
//這個form表單裡有一個檔案,要做的是把檔案上傳後的檔名賦給user的某個欄位
**user.setFileName(req.getParts());**
} catch (IllegalAccessException | InvocationTargetException e) {
e.printStackTrace();
}
ObjectMapper mapper = new ObjectMapper();
String s = mapper.writeValueAsString(user);
resp.getWriter().print(s);
}
上傳步驟寫在了User物件裡的某個set方法中,這樣就完成了ajax提交form表單帶檔案.
public class User {
private String id;
private String name;
private int age;
private boolean state;
private String fileName;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public boolean isState() {
return state;
}
public void setState(boolean state) {
this.state = state;
}
public String getFileName() {
return fileName;
}
public void setFileName(Collection<Part> prats) {
this.fileName = "";
try {
for (Part part : prats) {
ApplicationPart ap = (ApplicationPart) part;
String suffix = ap.getSubmittedFileName();
if (suffix != null && !"".equals(suffix)) {
suffix = suffix.substring(suffix.lastIndexOf("."));
String str = "upload/" + System.currentTimeMillis() + suffix;
part.write(StaticString.UPLOADPATH + str);
this.fileName += str + ",";
}
}
this.fileName = this.fileName.substring(0, this.fileName.length() - 1);
} catch (Exception e) {
// TODO: handle exception
}
}
}