以下ajax分别通过两个名为saveEmpData和saveSourceData的web方法将数据发布到数据库。
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btnAdd0", function () { //
var rowCount = $('.data-contact-person0').length + 1;
var contactdiv = '<tr class="data-contact-person0">' +
'<td><input type="text" style="width:200px;" name="employeename' + rowCount + '" placeholder="Your name..." class="form-control employeename01" /></td>' +
'<td><input type="text" style="width:200px;" name="employeetitle' + rowCount + '" placeholder="Your title..." class="form-control employeetitle01" /></td>' +
'<td><input type="text" style="width:200px;" name="employeeemail' + rowCount + '" placeholder="Your email address..." class="form-control employeeemail01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd0" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete0" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable0').append(contactdiv); // Adding these controls to Emp table class
});
$(document).ready(function () {
$(document).on("click", "#btnAdd1", function () { //
var rowCount = $('.data-contact-person1').length + 1;
var contactdiv = '<tr class="data-contact-person1">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" placeholder="Name of income source..." class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" placeholder="Address of income source..." class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" placeholder="Income..." class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable1').append(contactdiv); // Adding these controls to Source table class
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
function getAllEmpData() {
var data = [];
$('tr.data-contact-person0').each(function () {
var ename = $(this).find('.employeename01').val();
var etitle = $(this).find('.employeetitle01').val();
var email = $(this).find('.employeeemail01').val();
var alldata = {
'emplName': ename,
'emplTitle': etitle,
'empMail': email
}
data.push(alldata);
});
console.log(data);
return data;
}
function getAllSourcepData() {
var data = [];
$('tr.data-contact-person1').each(function () {
var sname = $(this).find('.sourcename01').val();
var saddress = $(this).find('.sourceaddress01').val();
var sincome = $(this).find('.sourceincome01').val();
var alldata = {
'mySource': sname,
'mySAddress': saddress,
'mySIncome': sincome
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function (event) {
event.preventDefault();
var empComplete = false, sourceComplete = false;
function checkComplete() {
if (empComplete && sourceComplete) {
$("#result").text("All complete");
}
}
$("#result").text("");
var data = JSON.stringify(getAllEmpData());
console.log(data);
$.ajax({
url: 'testpost.php/saveEmpData',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
empComplete = true;
checkComplete();
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
var data = JSON.stringify(getAllSourcepData());
console.log(data);
$.ajax({
url: 'testpost.php/saveSourceDatsa',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
sourceComplete = true;
checkComplete();
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<div class="bs-example">
<form id="form1" runat="server" novalidate="novalidate">
<div class="container">
<h2>Dynamic Forms</h2>
<table style="width:55%" id="maintable0">
<thead>
<tr>
<th>Employee Name</th>
<th>Title</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person0">
<td>
<input type="text" style="width:200px;" id="employeeename" name="employeename" class="form-control employeename01" placeholder="Your name..."></td>
<td>
<input type="text" style="width:200px;" name="employeetitle" class="form-control employeetitle01" placeholder="Your title..."></td>
<td>
<input type="text" style="width:200px;" name="employeeemail" class="form-control employeeemail01" placeholder="Your email address..."></td>
<td>
</td>
</tr>
</tbody>
</table><br><br>
<table style="width:73%" id="maintable1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Income</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person1">
<td>
<input type="text" style="width:200px;" name="sourcename" class="form-control sourcename01" placeholder="Name of income source..."></td>
<td>
<input type="text" style="width:200px;" name="sourceaddress" class="form-control sourceaddress01" placeholder="Address of income source..."></td>
<td>
<input type="text" style="width:200px;" name="sourceincome" class="form-control sourceincome01" placeholder="Income..."></td>
<td style="width:200px;">
<button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table><br><br>
<input type="submit" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm" value="Submit">
<output id="result"></output>
<br><br><br>
</div>
</form>
</div>
<script>
var x = 1;
</script>
</body></html>
上面的代码很有效，这要归功于我从SO专家那里得到的一些有用的指示。
但是，我们要求在发布到数据库之前先预览数据。
我在使用webforms和multiview控件之前已经完成了这项工作，但从未使用过ajax调用和webmethods。
这可能吗？
非常感谢任何指针。