Question

我有一个通常的形式。我尝试不同的唯一方法是将输入值的第3组分成json。当我点击提交时，我想像往常一样发送其他输入但是那些3作为一个json。我已经使用jquery将其转换为json但无法理解如何在提交单击时发送它。请查看我的代码，让我知道缺少什么。（仅供参考我在春季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。您可以使用json键将对象data直接发送到服务器，如下所示：

$.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='formId'定义ID 然后您可以使用以下命令将表单数据转换为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

$("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>

在表单提交

3 个答案: