在表单提交上发送 json 对象

Question

我有一个通常的形式。我唯一不同的是，将输入值的第 3 组输入到 json 中。当我点击提交时，我想像往常一样发送其他输入，但那些 3 作为一个 json。我已经使用 jquery 将它变成了 json，但无法理解如何在提交点击时发送它。请查看我的代码，让我知道缺少什么。 （仅供参考，我正在研究 spring mvc） 我有这个表格：

    <form class="form-horizontal" action="success" method="post" role="form">
    <div class="form-group">
        <input type="text" name="name" id="name" class="form-control" placeholder="Name" value="">
        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
</form>

我的 jquery 代码是：

        $(document).on('click',"#save",function() {
        var $items = $('#school_name, #year,#qualification ')
        var education=null;
        var json = {}
        $items.each(function() {
            json[this.id] = $(this).val();
        });
        education= JSON.stringify(json);
        alert(education)    //this gives me the required result
        window.location="success?education="+education;  
// I guess something is wrong here
    });

Answer 1

不清楚服务器期望的数据类型。因为，如果服务器接受 JSON 格式的数据，则根本无法使用查询参数发送。

您可能想查看$.ajax。您可以使用data 键将您的对象json 直接发送到服务器，如下所示：

$.ajax({
  url: 'success',
  data: json
})
.then(function(response) {
  // Handle the response here
});

它将使用查询参数简单地将数据发送到url 键指定的服务器 URL。如果您的服务器改为接受 JSON 格式的数据，您可能需要将请求方法更改为 POST 并将 contentType 设置为 json，如下所示：

$.ajax({
  method: 'POST',
  url: 'success',
  contentType: 'application/json',
  data: json
})
.then(function(response) {
  // Handle the response here
});

希望这可以澄清您的问题。有关更多详细信息，请查看浏览器开发者工具的网络选项卡，了解数据是如何提交到服务器的。

Answer 2

首先为您的表单定义 id id='formId' 然后您可以使用以下命令将表单数据转换为 JSON 字符串：

 var json = $("#formId").serialize();  

结果是：

school_name=college+name&year=1&qualification=good  

您可以使用 ajax 请求传递json 字符串：

 $.ajax({
     url: 'success',
     data: json
    })
    .then(function(response) {

    });

工作示例：

$(document).on('click',"#save",function() {

      var json = $("#formId").serialize();       
        alert(json)   
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="success" method="post" role="form" id="formId">
    <div class="form-group">
        <input type="text"  id="name" class="form-control" placeholder="Name" value="">
        <input type="text" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" name="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year" name="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" name="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
</form>

Answer 3

在这里，我在您的表单中创建了一个名为 Education 的隐藏字段，点击保存按钮时，它将生成您提到的 JSON 并将其分配到教育字段，然后在 post 方法中将您的表单提交到 success URL

p>

$("document").ready(function(){

    $("#save").click(function(e){
    
        var $items = $('#school_name, #year,#qualification')
        var education=null;
        var json = {}
        $items.each(function() {
            json[this.id] = $(this).val();
        });
        education= JSON.stringify(json);
       $("#education").val(education);
    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form class="form-horizontal" action="success" method="post" role="form">
    <div class="form-group">
        <input type="text" name="name" id="name" class="form-control" placeholder="Name" value="">
        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of Birth" value="">
    </div>

    <div class="row form-group">
        <div class="col-sm-3">
            <input type="text" id="school_name" class="form-control" placeholder="school/college name" />
        </div>
        <div class="col-sm-3">
            <select class="form-control year" id="year">
<option>1</option>
<option>2</option>
</select>
        </div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="qualification" placeholder="qualification" />
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-primary" id="add" value="add">Add More</button>
        </div>
    </div>

    <input type="submit" class="btn btn-danger form-control" id="save" value="Save">
    <input type="hidden" id="education" name="education">
</form>