转:http://www.cnblogs.com/w5942066/archive/2017/08/02/7272137.html#undefined
实现的功能里面的数据提交保存到数据库,同事对数据进行验证,这是要实现的效果,由于cms的原因这里只能添加html页面不能用aspx。
1、页面布局好了首先你要添加jquery文件(这个百度自己下载)在写Ajax方法 前台是这样的。你会发现我只是用按钮提交的没有用表单,因为下面要拼接表格
<div class="yjdjfm"> <div class="yjdjfd"> <ul> <li><span>仪检名称:</span><input id="txtyjneme" name="txtyjneme" type="text" value="" required="required" oninvalid="setCustomValidity('必须填写!');" οninput="setCustomValidity('');" /><strong>*</strong><i class="yz_name" style="display:none; color:red;">请填写仪检名称</i></li> <li><span>规格型号:</span><input id="txtyjxh" name="txtyjxh" type="text" value="" autofocus="autofocus" placeholder="" /><strong>*</strong><i class="yz_xh" style="display:none; color:red;">请填写规格型号</i></li> <li><span>出厂编号:</span><input id="txtyjnumber" name="txtyjnumber" type="text" value="" /><strong>*</strong><i class="yz_bh" style="display:none; color:red;">请填写设备编号</i></li> </ul> <ul style="float:right; margin-top:-122px;"> <li><span>登记日期:</span><input id="txtyjdate" name="txtyjdate" type="text" value="" readonly /><strong>*</strong><i style="color:#d0cfcf;">系统默认时间</i></li> <li><span>登 记 人:</span><input id="txtyjperson" name="txtyjperson" type="text" value="" /><strong>*</strong><i class="yz_person" style="display:none; color:red;">请填写您的姓名</i></li> <li><span>联系电话:</span><input id="txtyjphone" name="txtyjphone" type="number" value="" /><strong>*</strong><i class="yz_phone" style="display:none; color:red;">请正确填写手机号码</i></li> </ul> </div> <button class="yjdjtjan" id="btntj">添加记录</button> <div style="clear:both;"></div> <div class="yjdjlist"> <table id="tttab"> <tr id="yjdjtrone"> <td>序号</td> <td>仪检名称</td> <td>规格型号</td> <td>出厂编号</td> <td>登记日期</td> <td>登 记 人</td> <td>联系电话</td> </tr> </table></div> </div>
2、验证数据Ajax提交
<script type="text/javascript"> function cheack() { var _yjname = $("#txtyjneme").val();//jQuery获取文本框仪检名称值 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("请仔细核对信息再提交,提交了就无法更改"); if (like == true) { $.ajax({ type:"post", //提交方式 url: "{config.webpath}tools/submit_ajax.ashx", //提交路径 data:{name:_name,xh:_xh,bh:_number,date:_date,person:_person,phone:_phone},//参数 success: function (result, status)//成功函数 { alert("数据库保存成功!"); $("#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>");//拼接表格 cs++; $("input[name='txtyjneme']").val(""); $("input[name='txtyjxh']").val(""); $("input[name='txtyjnumber']").val(""); $(".yjdjlist").css("display", "block"); }, error: function () { alert("添加失败,程序异常!"); return; } });
} else { return; } }); }); </script>
3、重点说一下这个ajax提交这里:
type提交的方法一般我都是用post,get提交数据多了就不行;
URL:提交的路径以为提交到submit_ajax.ashx页面所以不需要写方法,它默认到submit_ajax页面里的ProcessRequest()的方法中,之前我自己写了方法也制定到这个方法上 但是很遗憾没有获取到值,如果提交aspx页面就要写到页面的方法如:url: "{config.webpath}tools/submit_ajax.ashx/方法名",
data:数据参数,这边的name,xh,bh要跟取值的时候对应,
我没有写dataType,因为我取值不做处理就不以一般的json传值了,开始的时候我加了json发现到那边取值有点麻烦(可能我方法不对);
4、来看一下后台
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> /// 插入数据 /// </summary> /// <param name="sql">sql语句</param> /// <returns>影响的行数</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(); }
你只要url指定这个页面 它就会加载ProcessRequest(HttpContext context)这个方法;ajax传的值用var类型来接收。这里我就不写啥SqlDB类了。
5、添加一条成功的效果
添加2条拼接上去数据库也保存了