表单数据未填充

Question

表单数据未填充

jac*_*0st 1 javascript java ajax rest spring-boot

我目前有一个网页点击网络服务来发送多部分/表单数据，但不知何故，这些字段没有被附加到表单数据对象中。有人可以帮我吗？

索引.html

<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>

Run Code Online (Sandbox Code Playgroud)

控制器

@RestController
 public class CardController {

@Autowired
private CardService cardService;

@RequestMapping(value="/save", method = RequestMethod.POST)
 public ResponseEntity<?> multiUploadFileModel(@ModelAttribute Card card) {

        cardService.saveCard(card);
        return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);
  }
}

Run Code Online (Sandbox Code Playgroud)

模型

@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;

Run Code Online (Sandbox Code Playgroud)

单击提交按钮时的请求有效负载是这样的：

------WebKitFormBoundary1NqBHFrbwUgHBc7g 内容处置：表单数据；名称=“自定义字段”

这是一些额外的数据，测试------WebKitFormBoundary1NqBHFrbwUgHBc7g--

也欢迎有关后端处理的评论。

请帮助！！

Answer 1

xor*_*zor 5

<input>正如我的评论中所提供的，您忘记了、<select>等中的“名称”参数。

这会导致字段及其数据不会添加到生成的 POST 中（因为浏览器不知道如何处理它）。

归档时间：	8 年，8 月前
查看次数：	1878 次
最近记录：	8 年，8 月前