个人中心
gpt4 book ai didi

javascript - 表单数据未填充

转载 作者：行者123 更新时间：2023-11-28 17:47:58 25 4
gpt4 key购买 nike

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

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

Controller 

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

型号

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

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

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

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

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

请帮忙!!

最佳答案

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

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

关于javascript - 表单数据未填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46284967/

25 4 0
文章推荐： javascript - 如何在鼠标悬停时停止滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com