MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » ASP.NET前台html页面AJAX提交数据后盾ashx页面接收

ASP.NET前台html页面AJAX提交数据后盾ashx页面接收数据

www.MyException.Cn  网友分享于:2013-08-11  浏览:0次
ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据

摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改。前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天终于弄出来了。尝试了好多种方法最后还是用ajax解决了好了废话不多说了直接进入正题。

   

      实现的功能里面的数据提交保存到数据库,同事对数据进行验证,这是要实现的效果,由于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('必须填写!');" oninput="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>&nbsp;&nbsp;&nbsp;人:</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>&nbsp;&nbsp;&nbsp;</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条拼接上去数据库也保存了

新手上路,请各位大牛有缘见者多多指教不足或者错的地方!

文章评论

程序员必看的十大电影
程序员必看的十大电影
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
Java程序员必看电影
Java程序员必看电影
我的丈夫是个程序员
我的丈夫是个程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
老程序员的下场
老程序员的下场
程序员都该阅读的书
程序员都该阅读的书
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
每天工作4小时的程序员
每天工作4小时的程序员
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
总结2014中国互联网十大段子
总结2014中国互联网十大段子
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我是如何打败拖延症的
我是如何打败拖延症的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
 程序员的样子
程序员的样子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
代码女神横空出世
代码女神横空出世
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员和编码员之间的区别
程序员和编码员之间的区别
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员应该关注的一些事儿
程序员应该关注的一些事儿
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个调试和排错的小建议
10个调试和排错的小建议
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
鲜为人知的编程真相
鲜为人知的编程真相
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
漫画:程序员的工作
漫画:程序员的工作
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
如何成为一名黑客
如何成为一名黑客
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员的鄙视链
程序员的鄙视链
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
那些争议最大的编程观点
那些争议最大的编程观点
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有