Abstract: Recently, in writing websites, it is difficult to get the demand changed again. It is true that the enterprise's portal website has to become a backstage management system, and I can only silently change as a small worker. Front-end HTML pages need to submit data to the background for processing, but can not use form form, so after a day of research, finally came out. After trying many methods, we finally solved the nonsense with ajax and went straight to the topic.
The data submission in the function is saved to the database, and colleagues verify the data. This is the effect to be achieved. Because of the reasons of cms, only html pages can be added here, but aspx can not be used.
1. Page layout is good, first you need to add jquery file (this Baidu downloads itself) in the writing Ajax method front desk is like this. You'll find that I just submit useless forms with buttons, because the form is spliced below.
<div class="yjdjfm"> <div class="yjdjfd"> <ul> <li><span>Name of Instrument Inspection:</span><input id="txtyjneme" name="txtyjneme" type="text" value="" required="required" oninvalid="setCustomValidity('Must fill in!');" oninput="setCustomValidity('');" /><strong>*</strong><i class="yz_name" style="display:none; color:red;">Please fill in the name of the instrument.</i></li> <li><span>Specifications and models:</span><input id="txtyjxh" name="txtyjxh" type="text" value="" autofocus="autofocus" placeholder="" /><strong>*</strong><i class="yz_xh" style="display:none; color:red;">Please fill in the specifications and models.</i></li> <li><span>Exit number:</span><input id="txtyjnumber" name="txtyjnumber" type="text" value="" /><strong>*</strong><i class="yz_bh" style="display:none; color:red;">Please fill in the equipment number.</i></li> </ul> <ul style="float:right; margin-top:-122px;"> <li><span>Date of registration:</span><input id="txtyjdate" name="txtyjdate" type="text" value="" readonly /><strong>*</strong><i style="color:#d0cfcf;">System default time</i></li> <li><span>Deng remember People:</span><input id="txtyjperson" name="txtyjperson" type="text" value="" /><strong>*</strong><i class="yz_person" style="display:none; color:red;">Please fill in your name.</i></li> <li><span>Contact number:</span><input id="txtyjphone" name="txtyjphone" type="number" value="" /><strong>*</strong><i class="yz_phone" style="display:none; color:red;">Please fill in the phone number correctly.</i></li> </ul> </div> <button class="yjdjtjan" id="btntj">Add record</button> <div style="clear:both;"></div> <div class="yjdjlist"> <table id="tttab"> <tr id="yjdjtrone"> <td>Serial number</td> <td>Name of instrumentation</td> <td>Specification type</td> <td>Factory number</td> <td>Date of registration</td> <td>Deng remember people</td> <td>Contact number</td> </tr> </table></div> </div>
2. Validation data Ajax submission
<script type="text/javascript">
function cheack()
{
var _yjname = $("#txtyjneme").val();//jQuery Getting Text Box Check Name Value
var _yjxh = $("#txtyjxh").val();
var _yjbh = $("#txtyjnumber").val();
var _yjperson = $("#txtyjperson").val();
var _yjphone = $("#txtyjphone").val();
if (_yjname == "") { $(".yz_name").css({ display: "block", float: "right" }); return false; } else { $(".yz_name").css("display","none") }
if (_yjxh == "") { $(".yz_xh").css({ display: "block", float: "right" }); return false; } else { $(".yz_xh").css("display", "none") }
if (_yjbh == "") { $(".yz_bh").css({ display: "block", float: "right" }); return false; } else { $(".yz_bh").css("display", "none") }
if (_yjperson == "") { $(".yz_person").css({ display: "block", float: "right" }); return false; } else { $(".yz_person").css("display", "none") }
if (!(/^1[34578]\d{9}$/.test(_yjphone)) && _yjphone.length == 11) { $(".yz_phone").css("display", "none"); return true;}else { $(".yz_phone").css({ display: "block", float: "right" }); return false;}}
$(document).ready(function () {
var d = new Date();
var cs = 1;
$("#txtyjdate").val(d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
$("#btntj").click(function () {
if (cheack() == false) { return;}
var _name = $("#txtyjneme").val();
var _xh = $("#txtyjxh").val();
var _number = $("#txtyjnumber").val();
var _date = $("#txtyjdate").val();
var _person = $("#txtyjperson").val();
var _phone = $("#txtyjphone").val();
like = window.confirm("Please check the information carefully before submitting it, it can not be changed after submitting it.");
if (like == true) {
$.ajax({
type:"post", //Submission mode
url: "{config.webpath}tools/submit_ajax.ashx", //Submission path
data:{name:_name,xh:_xh,bh:_number,date:_date,person:_person,phone:_phone},//parameter
success: function (result, status)//Success function
{
alert("The database was saved successfully!");
$("#tttab").append("<tr><td>" + cs + "</td><td>" + _name + "</td><td>" + _xh + "</td><td>" + _number + "</td><td>" + _date + "</td><td>" + _person + "</td><td>" + _phone + "</td></tr>");//Mosaic form
cs++;
$("input[name='txtyjneme']").val("");
$("input[name='txtyjxh']").val("");
$("input[name='txtyjnumber']").val("");
$(".yjdjlist").css("display", "block");
},
error: function () { alert("Add failure, program exception!"); return; }
});
}
else { return; }
});
});
</script>
3. Focus on the submission of this ajax here:
type submission is usually done by post, but get submission can't be done with more data.
URLs: The submission path assumes that submit to submit_ajax.ashx page does not require writing method. It defaults to the method of ProcessRequest() in submit_ajax page. I wrote the method on this method before, but unfortunately I did not get the value. If submit aspx page, the method to write to the page is url: "{config.webpath}tools/submit_ajax.ashx/square". "
data: data parameters, name, xh, bh on this side should correspond to the value.
I didn't write dataType, because I didn't pass the value by json without processing. At the beginning, I added json and found that it was a bit troublesome to get the value there (maybe my method was wrong);
4. Look at the background.
public void ProcessRequest(HttpContext context) { var name = HttpContext.Current.Request["name"]; var xh = HttpContext.Current.Request["xh"]; var bh = HttpContext.Current.Request["bh"]; var data = HttpContext.Current.Request["date"]; var person = HttpContext.Current.Request["person"]; var phone =HttpContext.Current.Request["phone"]; string _sql = string.Format("insert into InstrumentCheck(Name,Modle,Number,Person,Phone) values('{0}','{1}','{2}','{3}','{4}')",name,xh,bh,person, phone); _sql.Replace("'", " "); ExecuteNonQuery(_sql); } public static string connectionStringgg = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; /// <summary> /// insert data /// </summary> /// <param name="sql">sql Sentence</param> /// <returns>Number of rows affected</returns> public void ExecuteNonQuery(string sql) { SqlConnection connection = new SqlConnection(connectionStringgg); if(connection.State==ConnectionState.Closed) { connection.Open(); } SqlCommand cmd = new SqlCommand(sql, connection); cmd.ExecuteNonQuery(); }
As long as the url specifies the page, it loads the ProcessRequest(HttpContext context) method; the value passed by ajax is received by var type. I won't write any SqlDB classes here.
5. Add a Successful Effect
Adding 2 splices to the database is also saved.
Novice on the road, please Daniel predestined to see more advice inadequate or wrong places!