Javascript 表单数据未填充
目前，我有一个网页通过Web服务发送多部分/表单数据，但不知何故，这些字段没有附加到formdata对象中。有人能帮我吗 index.htmlJavascript 表单数据未填充,javascript,java,ajax,rest,spring-boot,Javascript,Java,Ajax,Rest,Spring Boot,目前，我有一个网页通过Web服务发送多部分/表单数据，但不知何故，这些字段没有附加到formdata对象中。有人能帮我吗 index.html <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"></meta> <title>Sample upload</title> <script type="text/javascript
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Sample upload</title>
<script type="text/javascript" src="webjars/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_ajax_submit();
});
});
function fire_ajax_submit() {
// Get form
var form = $('#dataform')[0];
var data = new FormData(form);
data.append("CustomField", "This is some extra data, testing");
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/save",
data: data,
//http://api.jquery.com/jQuery.ajax/
//https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
processData: false, //prevent jQuery from automatically transforming the data into a query string
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
$("#result").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#result").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
}
</script>
</head>
<body>
<h1>SampleCardSubmit</h1>
<form id="dataform" method="POST" enctype="multipart/form-data">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Section I:To be filled by Partner</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-5 control-label">Partner Name:</label>
<div class="col-sm-5">
<input id="name" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Photograph of
applicant:</label>
<div class="col-sm-5">
<input id="photo" type="file" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner OLM ID:</label>
<div class="col-sm-5">
<input id="olmid" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Mobile
Number:</label>
<div class="col-sm-5">
<input id="mobile" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Email:</label>
<div class="col-sm-5">
<input id="email" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Disability:</label>
<div class="col-sm-5">
<select id="disabibilty" class="form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Company Name:</label>
<div class="col-sm-5">
<input id="company" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Name of Partner on
Company ID:</label>
<div class="col-sm-5">
<input id="nameoncard" type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-sm-5">
<input id="btnSubmit" type="submit" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
</form>
<h1>Ajax Post Result</h1>
<span id="result"></span>
</body>
</html>
@Entity
public class Card {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String name;
private Blob photo;
@Column(unique=true)
private String olmId;
private String mobileNumber;
private String email;
private String disability;
private String partnerCompany;
private String nameOnCompanyCard;
请帮帮我 您可以通过在标题中添加x-www-form-urlencoded并添加数据来尝试以下逻辑，如下所示。让我知道它是否适合你
$.ajax({
type: "POST",
url: "/save",
headers: {
'Content-Type': 'appliation/x-www-form-urlencoded',
'Authorization': 'Basic VGV.... Uy' // Add authorization if required
},
data: {
"CustomField", "This is some extra data, testing",
..... // More attributes if any
},
timeout: 600000,
success: function (data) {
$("#result").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#result").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
如我在评论中所述，您忘记了
这会导致字段及其数据不会添加到生成的帖子中（因为浏览器不知道如何处理它）。我确信您需要在输入/选择/etc中添加一个“name”参数，以便将其添加到帖子数据中。谢谢！！成功了：）克洛林佐的回答成功了。这也会起作用，但它不会是聪明的编码，因为如果我们有很多字段再次执行form.append（），n再次是令人厌烦的。是的。在输入字段中添加name属性有效，代码也有效。但图像无法保存。有什么建议可以解决吗？我添加了这个作为答案，以便您可以将其标记为已解决；）至于为什么不上传，我不知道，因为我对你正在使用的框架一无所知。最好还是另问一个问题。
doh。。。你是我的英雄。
$.ajax({
type: "POST",
url: "/save",
headers: {
'Content-Type': 'appliation/x-www-form-urlencoded',
'Authorization': 'Basic VGV.... Uy' // Add authorization if required
},
data: {
"CustomField", "This is some extra data, testing",
..... // More attributes if any
},
timeout: 600000,
success: function (data) {
$("#result").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#result").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});