HTML表单自动将JSON对象发送到API

时间:2016-03-31 10:55:24

标签: html json automation

我有一个来自Formstack的在线表格,我放在一个网站上,表格的代码是HTML格式。但是,我需要进行设置,以便每当有人通过表单提交信息时,表单会自动向我发送信息(已经设置),然后将来自JSON的信息发送到Trulioo的API。 API应该让我知道结果。

我在编码方面没有很多经验,但我知道这需要一些有趣的代码才能使这个系统自动化。

有人可以帮忙吗?

以下是表单代码的一部分:

<div id="fsRow2312547-2" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical    
fsSpan100" id="fsCell40879974" lang="en">
<span id="label40879974" class="fsLabel fsRequiredLabel">Name<span   
class="fsRequiredMarker">*</span></span>
<div class="fsSubFieldGroup">
<div class="fsSubField fsNameFirst">
<input type="text" id="field40879974-first" name="field40879974-first" 
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-first">First 
Name<span class="hidden">*</span></label>
</div>
<div class="fsSubField fsNameLast">
<input type="text" id="field40879974-last" name="field40879974-last" 
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-last">Last 
Name<span class="hidden">*</span></label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="fsRow2312547-3" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical 
fsSpan100" id="fsCell40879975" lang="en">
<label id="label40879975" class="fsLabel fsRequiredLabel" 
for="field40879975">Address<span class="fsRequiredMarker">*</span>                        
</label>
<label for="field40879975-address" class="hidden">Address Line 1<span 
class="fsRequiredMarker">*</span></label>
<input type="text" id="field40879975-address" name="field40879975-address" 
size="50" required value="" class="fsField fsFieldAddress fsRequired" aria-
required="true" />
<input type="text" id="field40879975-address2" name="field40879975-address2" 
size="50" value="" style="margin-top:5px;" class="fsField fsFieldAddress2" 
/>
<div class="fsSubFieldGroup">
<div class="fsSubField fsFieldCity">
<input type="text" id="field40879975-city" name="field40879975-city" 
size="15" value="" required class="fsField fsFieldCity fsRequired" aria-
required="true" />
<label class="fsSupporting" for="field40879975-city">City</label>
</div>

Formstack(在线表格公司)使用一些代码发送输入的信息。我需要它是这样的JSON格式:

{
  "AcceptTruliooTermsAndConditions": true,
  "Demo": true,
  "ConfigurationName": "sample string 4",
  "ConsentForDataSources": [
    "sample string 1",
    "sample string 2"
  ],
  "CountryCode": "sample string 5",
  "DataFields": {
    "PersonInfo": {
      "FirstGivenName": "sample string 1",
      "MiddleName": "sample string 2",
      "FirstSurName": "sample string 3",
      "SecondSurname": "sample string 4",
      "ISOLatin1Name": "sample string 5",
      "DayOfBirth": 1,
      "MonthOfBirth": 1,
      "YearOfBirth": 1,
      "MinimumAge": 1,
      "Gender": "sample string 6",
      "AdditionalFields": {
        "FullName": "sample string 1"
      }
    },
    "Location": {
      "BuildingNumber": "sample string 1",
      "BuildingName": "sample string 2",
      "UnitNumber": "sample string 3",
      "StreetName": "sample string 4",
      "StreetType": "sample string 5",
      "City": "sample string 6",
      "Suburb": "sample string 7",
      "County": "sample string 8",
      "StateProvinceCode": "sample string 9",
      "Country": "sample string 10",
      "PostalCode": "sample string 11",
      "AdditionalFields": {
        "Address1": "sample string 1"
      }
    },
    "Communication": {
      "MobileNumber": "sample string 1",
      "Telephone": "sample string 2",
      "EmailAddress": "sample string 3"
etc
    }
  }
}

1 个答案:

答案 0 :(得分:0)

您需要一个包含一些代码的Javascript文件,如下所示......

$(document).ready(function () {
  var foo = $("#foo");
  
  foo.submit(function (e) {
    e.preventDefault();
    
    var jsonData = {
      "bar":$("#bar").value(),
      "stuff":"another field needed by API"
    };
    
    $.ajax({
      url : 'http://path.to/api/url',
      dataType : 'json',
      contentType : 'application/json;',
      data : jsonData,
      type : 'POST',
      complete : handleData
    });
    
    function handleData(data) {
      console.log(data);
      // do whatever with response data
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="foo">
  <input type="text" name="bar" id="bar" />
  <input type="submit" name="baz" id="baz" />              
</form>

您需要澄清要求,并可能使用网络编程进行更多研究......