在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