javascript - POST 成功后表单未重置
问题描述
我正在尝试创建一个写入数据库的简单表单。由于该服务的运行地点的性质,它必须在 IE 11 中运行。
故事是,当我输入值时,点击提交时数据会发布,但成功功能不会触发。
第二部分是如果我将表单留空,我将收到验证错误,成功函数触发并且我在数据库中得到一个空行。
我也很乐意承认我不知道我还不知道什么,因为我对 JavaScript 和 AJAX 非常缺乏经验。
<form id="NewThinClient" runat="server">
<h3>Create a new thin client</h3>
<p>
<label>Asset Tag:</label>
<asp:TextBox id="assetTag" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ControlToValidate="assetTag" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank" ></asp:RequiredFieldValidator>
</p>
<p>
<label>MAC:</label>
<asp:TextBox id="macAddress" runat="server" ValidationGroup="TextBoxes" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="macAddress" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>Serial:</label>
<asp:TextBox id="serial" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="serial" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>TimeZone:</label>
<asp:DropDownList id="cbTimeZone" runat="server">
<asp:ListItem>Pacific</asp:ListItem>
<asp:ListItem>Arizona</asp:ListItem>
<asp:ListItem>Mountain</asp:ListItem>
<asp:ListItem>Central</asp:ListItem>
<asp:ListItem>Eastern</asp:ListItem>
</asp:DropDownList>
</p>
<p>
<label>City</label>
<asp:TextBox id="custom1" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="custom1" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>State</label>
<asp:TextBox id="custom2" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="custom2" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>Business Unit</label>
<asp:TextBox id="custom3" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="custom3" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>Function</label>
<asp:TextBox id="custom4" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="custom4" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>Version</label>
<asp:TextBox id="custom5" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="custom5" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<p>
<label>Other</label>
<asp:TextBox id="custom6" ValidationGroup="TextBoxes" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="custom6" ValidationGroup="TextBoxes" ErrorMessage="Cannot be blank"></asp:RequiredFieldValidator>
</p>
<asp:Button id="saveThinClient" OnClientClick="SaveThinClient()" runat="server" text="Submit" ValidationGroup="TextBoxes" />
</form>
function SaveThinClient() {
$(function() {
$.ajax({
type: 'POST',
url: 'api/ThinClient',
contentType: "application/json",
dataType: "json",
data: JSON.stringify({
HostName: $('#assetTag').val(),
MediaAccessController: $('#macAddress').val(),
SerialNumber: $('#serial').val(),
TimeZone: $('#cbTimeZone').val(),
Custom1: $('#custom1').val(),
Custom2: $('#custom2').val(),
Custom3: $('#custom3').val(),
Custom4: $('#custom4').val(),
Custom5: $('#custom5').val(),
Custom6: $('#custom6').val()
}),
success: function(data) {
$('#assetTag').val('');
$('#macAddress').val('');
$('#serial').val('');
$('#custom1').val('');
$('#custom2').val('');
$('#custom3').val('');
$('#custom4').val('');
$('#custom5').val('');
$('#custom6').val('');
alert('Entry recorded ' + data);
},
});
});
}
编辑:包括 api/ThinClient
public bool Post([FromBody] ThinClient myThinClient)
{
//Create http response
var response = new HttpResponseMessage();
//return fail on bad data
if (!response.IsSuccessStatusCode) return response.StatusCode == HttpStatusCode.BadRequest;
//create parameters
var parameters = GetParameters();
parameters.Add("p_hostname", myThinClient.HostName);
parameters.Add("p_mac", myThinClient.MediaAccessController);
parameters.Add("p_serial", myThinClient.SerialNumber);
parameters.Add("p_timezone", myThinClient.TimeZone);
parameters.Add("p_custom1", myThinClient.Custom1);
parameters.Add("p_custom2", myThinClient.Custom2);
parameters.Add("p_custom3", myThinClient.Custom3);
parameters.Add("p_custom4", myThinClient.Custom4);
parameters.Add("p_custom5", myThinClient.Custom5);
parameters.Add("p_custom6", myThinClient.Custom6);
//insert new thin client
StoredProcedures.DoInsert("spInsertThinClient", parameters);
//return OK
return response.StatusCode == HttpStatusCode.OK;
}
解决方案
推荐阅读
- java - @FXML annotation and FXMLLoader class not resolved to a type in Java 11 and JavaFX 11
- python - 在python中计算均值、中位数和众数
- r - Combine rows based on ranges in a column
- c++ - Transform hand written loop to std library call
- reactjs - 使用 React JS 级联选择框
- mysql - 删除重复数据mysql
- python-3.x - Flask-socketio 一次发送一个有效载荷
- reactjs - 在 Link 组件中为 span 添加颜色不会改变 span 的颜色?
- java - Spring数据保存更新ID为null
- python - Why is 'root' keyword treated differently when it is called in Kivy?