ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
Posted 江南-烟雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据相关的知识，希望对你有一定的参考价值。
实现的功能里面的数据提交保存到数据库，同事对数据进行验证，这是要实现的效果
1 <div class="yjdjfm"> 2 <div class="yjdjfd"> 3 <ul> 4 <li><span>仪检名称：</span><input id="txtyjneme" name="txtyjneme" type="text" value="" required="required" oninvalid="setCustomValidity(‘必须填写！‘);" oninput="setCustomValidity(‘‘);" /><strong>*</strong><i class="yz_name" style="display:none; color:red;">请填写仪检名称</i></li> 5 <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> 6 <li><span>出厂编号：</span><input id="txtyjnumber" name="txtyjnumber" type="text" value="" /><strong>*</strong><i class="yz_bh" style="display:none; color:red;">请填写设备编号</i></li> 7 </ul> 8 9 <ul style="float:right; margin-top:-122px;"> 10 <li><span>登记日期：</span><input id="txtyjdate" name="txtyjdate" type="text" value="" readonly /><strong>*</strong><i style="color:#d0cfcf;">系统默认时间</i></li> 11 <li><span>登 记 人：</span><input id="txtyjperson" name="txtyjperson" type="text" value="" /><strong>*</strong><i class="yz_person" style="display:none; color:red;">请填写您的姓名</i></li> 12 <li><span>联系电话：</span><input id="txtyjphone" name="txtyjphone" type="number" value="" /><strong>*</strong><i class="yz_phone" style="display:none; color:red;">请正确填写手机号码</i></li> 13 </ul> 14 </div> 15 <button class="yjdjtjan" id="btntj">添加记录</button> 16 17 <div style="clear:both;"></div> 18 19 20 <div class="yjdjlist"> 21 <table id="tttab"> 22 <tr id="yjdjtrone"> 23 <td>序号</td> 24 <td>仪检名称</td> 25 <td>规格型号</td> 26 <td>出厂编号</td> 27 <td>登记日期</td> 28 <td>登 记 人</td> 29 <td>联系电话</td> 30 </tr> 31 </table></div> 32 </div>
验证数据Ajax提交
1 <script type="text/javascript"> 2 function cheack() 3 { 4 var _yjname = $("#txtyjneme").val();//jQuery获取文本框仪检名称值 5 var _yjxh = $("#txtyjxh").val(); 6 var _yjbh = $("#txtyjnumber").val(); 7 var _yjperson = $("#txtyjperson").val(); 8 var _yjphone = $("#txtyjphone").val(); 9 if (_yjname == "") { $(".yz_name").css({ display: "block", float: "right" }); return false; } else { $(".yz_name").css("display","none") } 10 if (_yjxh == "") { $(".yz_xh").css({ display: "block", float: "right" }); return false; } else { $(".yz_xh").css("display", "none") } 11 if (_yjbh == "") { $(".yz_bh").css({ display: "block", float: "right" }); return false; } else { $(".yz_bh").css("display", "none") } 12 if (_yjperson == "") { $(".yz_person").css({ display: "block", float: "right" }); return false; } else { $(".yz_person").css("display", "none") } 13 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;}} 14 $(document).ready(function () { 15 var d = new Date(); 16 var cs = 1; 17 $("#txtyjdate").val(d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()); 18 $("#btntj").click(function () { 19 if (cheack() == false) { return;} 20 var _name = $("#txtyjneme").val(); 21 var _xh = $("#txtyjxh").val(); 22 var _number = $("#txtyjnumber").val(); 23 var _date = $("#txtyjdate").val(); 24 var _person = $("#txtyjperson").val(); 25 var _phone = $("#txtyjphone").val(); 26 like = window.confirm("请仔细核对信息再提交，提交了就无法更改"); 27 if (like == true) { 28 29 $.ajax({ 30 type:"post", //提交方式 31 url: "{config.webpath}tools/submit_ajax.ashx", //提交路径 32 data:{name:_name,xh:_xh,bh:_number,date:_date,person:_person,phone:_phone},//参数 33 success: function (result, status)//成功函数 34 { 35 alert("数据库保存成功！"); 36 $("#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>");//拼接表格 37 cs++; 38 $("input[name=‘txtyjneme‘]").val(""); 39 $("input[name=‘txtyjxh‘]").val(""); 40 $("input[name=‘txtyjnumber‘]").val(""); 41 $(".yjdjlist").css("display", "block"); 42 }, 43 error: function () { alert("添加失败，程序异常！"); return; } 44 }); 45 46 } 47 else { return; } 48 }); 49 }); 50 51 </script>
重点说一下这个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发现到那边取值有点麻烦（可能我方法不对）；
来看一下后台
1 public void ProcessRequest(HttpContext context) 2 { 3 4 var name = HttpContext.Current.Request["name"]; 5 var xh = HttpContext.Current.Request["xh"]; 6 var bh = HttpContext.Current.Request["bh"]; 7 var data = HttpContext.Current.Request["date"]; 8 var person = HttpContext.Current.Request["person"]; 9 var phone =HttpContext.Current.Request["phone"]; 10 string _sql = string.Format("insert into InstrumentCheck(Name,Modle,Number,Person,Phone) values(‘{0}‘,‘{1}‘,‘{2}‘,‘{3}‘,‘{4}‘)",name,xh,bh,person, phone); 11 _sql.Replace("‘", " "); 12 ExecuteNonQuery(_sql); 13 } 14 public static string connectionStringgg = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; 15 /// <summary> 16 /// 插入数据 17 /// </summary> 18 /// <param name="sql">sql语句</param> 19 /// <returns>影响的行数</returns> 20 public void ExecuteNonQuery(string sql) 21 { 22 SqlConnection connection = new SqlConnection(connectionStringgg); 23 if(connection.State==ConnectionState.Closed) 24 { 25 connection.Open(); 26 } 27 28 SqlCommand cmd = new SqlCommand(sql, connection); 29 cmd.ExecuteNonQuery(); 30 31 }
你只要url指定这个页面 它就会加载ProcessRequest(HttpContext context)这个方法；ajax传的值用var类型来接收。这里我就不写啥SqlDB类了。
以上是关于ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据的主要内容，如果未能解决你的问题，请参考以下文章
asp.net jquery ajax post 后台页面获取不到值 怎么解决？
前台用ajax,后台用C#,数据库用sql server,怎么让数据库的一个表呈现在前台html页面上