在javascript中将输入字段转换为Json

Question

我想从我的输入字段中获得json结果。

JSON结果

[{ScheduledVisit: "09/06/2017 12:00 AM", Company: "ABC Corp.", ContactPerson: "Someone"}] 

的原因是因为我希望它适合我的课的

public class ScheduleVisit 
{ 
    [Required(ErrorMessage = "* Required")] 
    public DateTime ScheduledVisit { get; set; } 
    public string Company { get; set; } 
    public string ContactPerson{ get; set; } 
} 

我不想使用$("inputForm").serialize();，因为我想学习如何手动完成此操作。

下面是我的输入形式

<div class="col_half"> 
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" /> 
</div> 

<div class="col_half col_last"> 
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" /> 
</div> 

<div class="col_two_third"> 
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" /> 
</div> 

请帮助。谢谢。

Answer 1

您可以类似于你的后端代码对象构造。在这里，我将输入序列化为scheduleVisit对象。

function scheduleVisit(obj) { 
 
    this.scheduledVisit = obj.scheduledVisit; 
 
    this.company = obj.company; 
 
    this.contactPerson = obj.contactPerson; 
 
} 
 

 
document.getElementById('button').addEventListener('click', function() { 
 
    var scheduledVisit = document.getElementById('ScheduledVisit').value; 
 
    var company = document.getElementById('company').value; 
 
    var contactPerson = document.getElementById('contact').value 
 
    var visit = new scheduleVisit({ 
 
    scheduledVisit: scheduledVisit, 
 
    company: company, 
 
    contactPerson: contactPerson 
 
    }); 
 

 
    console.log(JSON.stringify(visit)); 
 
});

<div class="col_half"> 
 
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" /> 
 
</div> 
 

 
<div class="col_half col_last"> 
 
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" /> 
 
</div> 
 

 
<div class="col_two_third"> 
 
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" /> 
 
</div> 
 

 
<button id=button>Submit</button>

Answer 2

使用纯JavaScript，你可以做JSON.stringify(yourInputValu)任何javascript对象转换为JSON

Answer 3

如果你的输入形式是简单的，你不希望有一个更通用的解决方案，你可以用它做很容易地：

function get(id) { return document.getElementById(id).value; } 

var json = JSON.stringify({ 
    ScheduledVisit: get('ScheduledVisit'), 
    Company: get('company'), 
    Contact: get('contact') 
}); 

Answer 4

可以遍历<form>.elements，使用fetch()或0设置每个.name和.value作为属性并且可以被提交给服务器FormData()对象的值，或设定的属性和值，在JavaScript对象可手动传递给JSON.stringify()

const form = document.forms[0]; 
 

 
form.onsubmit = e => { 
 
    e.preventDefault(); 
 
    const fd = new FormData(); 
 
    const props = {}; 
 
    for (let element of form.elements) { 
 
    if (element.type !== "submit") { 
 
     props[element.name] = element.value; 
 
     fd.append(element.name, element.value); 
 
    } 
 
    } 
 
    
 
    for (let [key, prop] of fd) { 
 
    console.log(key, prop) 
 
    } 
 
    
 
    const json = JSON.stringify(props); 
 
    console.log(json); 
 
}

<form> 
 
    <div class="col_half"> 
 
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" /> 
 
    </div> 
 

 
    <div class="col_half col_last"> 
 
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" /> 
 
    </div> 
 

 
    <div class="col_two_third"> 
 
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" /> 
 
    </div> 
 
    <input type="submit"> 
 
</form>

Answer 5

可以分配的你的输入值的一个对象。例如，请参阅下面的代码片段。然后，您可以将该对象序列化为JSON格式的字符串。

let obj = {}; 
 
obj.ScheduledVisit = document.getElementById("ScheduledVisit").value; 
 
obj.Company = document.getElementById("company").value; 
 
obj.Contact = document.getElementById("contact").value; 
 
console.log(obj); 
 
let jsonStringObj = JSON.stringify(obj); 
 
console.log(jsonStringObj);

<div class="col_half"> 
 
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" value="testVisit" id="ScheduledVisit" /> 
 
</div> 
 

 
<div class="col_half col_last"> 
 
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" value="testCompany" id="company" /> 
 
</div> 
 

 
<div class="col_two_third"> 
 
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" value="testContact" id="contact" /> 
 
</div>

Answer 6

请找到链接您的回答希望可以解决您的问题：“我想从我的输入字段得到一个JSON结果” techiescornersite.blogspot.in