我正在努力将用户数据发送到我的api中，并且在此表单中我正在尝试打印错误消息和成功的消息。所以现在无法在表单提交后打印错误或成功消息;
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Save").click(function () {
// var person = new Object();
// person.Title = $('#Title').val();
// person.FirstName = $('#FirstName').val();
// person.LastName = $('#LastName').val();
// person.CompnayName = $('#CompnayName').val();
// person.Address = $('#Address').val();
// person.Email= $('#Email').val();
// person.Phone = $('#Phone').val();
// person.Mobile = $('#Mobile').val();
debugger;
var person=$('#form1').serialize();
$.ajax({
url: 'http://192.168.1.102:1512/qlikapi/RegisterUser',
type: 'Post',
data:person,
success: function (data, textStatus, xhr) {
console.log(data.ErrorMessage);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
});
});
</script>
<style>
textarea:focus, input:focus{
outline: 0;
}
input:focus:invalid,
textarea:focus:invalid{
border:1px solid #F5192F;
box-shadow:0 0 4px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border: 1px solid #64C364;
box-shadow: 0 0 4px #64C364;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form id="form1" method="post">
<div class="form-title-row">
<h1>Register Here</h1>
</div>
<div class="col-md-6">
<div class="form-row">
<label>
<span> Title </span>
<input type="text" name="Title" id="title"required>
</label>
</div>
<div class="form-row">
<label>
<span> FirstName </span>
<input type="text" name="FirstName" id="lastname"required>
</label>
</div>
<div class="form-row">
<label>
<span> Address </span>
<input type="text" name="Address" id="address"required>
</label>
</div>
<div class="form-row">
<label>
<span> Phone</span>
<input type="text" name="Phone" id="phone"required>
</label>
</div>
</div><!--closed fo first form<!-->
<div class="col-md-6">
<div class="form-row">
<label>
<span> LastName </span>
<input type="text" name="LastName" id="lastname"required>
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="Email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
</label>
</div>
<div class="form-row">
<label>
<span> CompanyName </span>
<input type="text" name="CompanyName" id="compnayname"required>
</label>
</div>
<div class="form-row">
<label>
<span> Mobile </span>
<input type="text" name="Mobile" id="Mobile"required>
</label>
</div>
<div class="form-row">
<button type="submit" id="Save">Submit Form</button>
</div>
</div>
</form>
</div><!-- closed for row><!-->
</div><!--closed for container><!-->
</body>
</html>
- 帮我配置!!
答案 0 :(得分：0)
<style>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
.my-notify-info, .my-notify-success, .my-notify-warning, .my-notify-error {
padding:10px;
margin:10px 0;
}
.my-notify-info:before, .my-notify-success:before, .my-notify-warning:before, .my-notify-error:before {
font-family:FontAwesome;
font-style:normal;
font-weight:400;
speak:none;
display:inline-block;
text-decoration:inherit;
width:1em;
margin-right:.2em;
text-align:center;
font-variant:normal;
text-transform:none;
line-height:1em;
margin-left:.2em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.my-notify-info:before {
content:"\f05a";
}
.my-notify-success:before {
content:'\f00c';
}
.my-notify-warning:before {
content:'\f071';
}
.my-notify-error:before {
content:'\f057';
}
.my-notify-info {
color: #00529B;
background-color: #BDE5F8;
}
.my-notify-success {
color: #4F8A10;
background-color: #DFF2BF;
}
.my-notify-warning {
color: #9F6000;
background-color: #FEEFB3;
}
.my-notify-error {
color: #D8000C;
background-color: #FFBABA;
}
textarea:focus, input:focus{
outline: 0;
}
input:focus:invalid,
textarea:focus:invalid{
border:1px solid #F5192F;
box-shadow:0 0 4px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border: 1px solid #64C364;
box-shadow: 0 0 4px #64C364;
}
</style>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<form id="form1" method="post">
<div class="form-title-row">
<h1>Register Here</h1>
</div>
<div class="col-md-6">
<div class="form-row">
<label>
<span> Title </span>
<input type="text" name="Title" id="title">
</label>
</div>
<div class="form-row">
<label>
<span> FirstName </span>
<input type="text" name="FirstName" id="lastname">
</label>
</div>
<div class="form-row">
<label>
<span> Address </span>
<input type="text" name="Address" id="address">
</label>
</div>
<div class="form-row">
<label>
<span> Phone</span>
<input type="text" name="Phone" id="phone">
</label>
</div>
</div><!--closed fo first form<!-->
<div class="col-md-6">
<div class="form-row">
<label>
<span> LastName </span>
<input type="text" name="LastName" id="lastname">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="Email" pattern="^\S+@\S+\.\S+$" title="example@mail.com">
</label>
</div>
<div class="form-row">
<label>
<span> CompanyName </span>
<input type="text" name="CompanyName" id="compnayname">
</label>
</div>
<div class="form-row">
<label>
<span> Mobile </span>
<input type="text" name="Mobile" id="Mobile">
</label>
</div>
<div class="form-row">
<button id="Save">Submit Form</button>
</div>
</div>
</form>
</div></div>
<div class="my-notify-info" style="display:none;" >This is info text</div>
<div class="my-notify-success" style="display:none;" >This is success text</div>
<div class="my-notify-warning" style="display:none;" >This is warning text</div>
<div class="my-notify-error" style="display:none;" >This is error text</div>
<script type="text/javascript">
$(function () {
$("#Save").button().click(function(event){
var title = $('#title').val();
if (title == "") {
if (title == "") {
document.getElementById("title").style.borderColor = "red";
}
$('.my-notify-warning').show();
$('.my-notify-warning').fadeIn();
$(".my-notify-warning").text("Please fill the required fields");
setTimeout(function () {
$('.my-notify-warning').fadeOut();
}, 2000);
}
event.preventDefault();
});
$("#title").focus(function () {
document.getElementById("title").style.borderColor = "";
});
});
</script>