【发布时间】：2022-02-13 16:50:09
【问题描述】：
我有这个项目，我必须在给定以下特定参数的情况下将数据发布到 url。我遇到了错误，我的代码一般都很乱。让我难过的一件事是如何将 JSON 对象中的特定值转换为 int。例如，参数“tickets”请求一个整数。任何帮助都会很棒。
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data" >
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required>
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required>
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required>
<input type="text" id="FirstName" name="FirstName" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" Name="Phone" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob"for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value='other'>other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit" >Submit</button>
</div>
</div>
</div>
</form>
Javascript
<script>
const Form = document.querySelectorAll('form');
Form.addEventListener('submit',function(e){
e.preventDefault();
const formData = new FormData(this);
const searchParams = new URLSearchParams();
for(const pair of formData){
searchParams.append(pair[0],pair[1]);
console.log(pair[0],pair[1]);
}
console.log(formData);
const response = fetch('https://api.leadprosper.io/ingest', {
method: 'POST',
body: searchParams,
headers:{
'Content-Type': 'application/json;'
}
}).then(function (reponse){
return reponse.json();
}).then(function(text){
console.log(text);
}).catch(function (error){
console.error(error);
})
})
</script>
带有我需要遵循的参数的有效负载。
{
"lp_campaign_id": "5848",
"lp_supplier_id": "5848",
"lp_key": "131bvmpb2",
"FirstName": "Amelia",
"LastName": "Nakia",
"Email": "jbaumbach@example.com",
"Phone": "3866311306",
"VehicleYear": 4,
"PurchaseDateMonth": "Groves",
"PurchaseDateYear": 1,
"FinancedLeased": "gray",
"Goal": "Thursday",
"DailyDistance": 7,
"YearlyDistance": 5,
"CompCoverage": "no",
"CollisionCoverage": "yes",
"MaritalStatus": "fuchsia",
"DOB": "2022-02-03",
"Occupation": "South",
"Gender": "male",
"LicenseClass": "lime",
"DriverAge": 6,
"LicensedSince": 2,
"LicenseLength": "Springs",
"InsuranceCancellation": "no",
"Suspensions": "no",
"Claims": "West",
"Tickets": 7,
"StartDate": "2022-02-07",
"City": "Lake Bailee",
"State": "AL",
"Postal": "68820"
}
【问题讨论】：
标签： javascript html forms