ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据澳门新葡亰赌995577

澳门新葡亰赌995577 1

对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms。

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

处理方法:

(1)html书写

form标签中去掉action参数,定义onSubmit方法,如下所示:

<div className="mc2">
      <form onSubmit={(e) => this.getSearchData(e,this.state.searchkey)}>
        <b></b>
        <input name="searchkey" type="text" className="search" placeholder="请输入关键字" value={this.state.searchkey} onChange={(e) => this.change(e.target.name,e.target.value)}/>
      </form>
    </div>

(2)事件处理

关键的是阻止掉页面默认提交:

getSearchData(event,name) {
    //ajax处理
    event.preventDefault();//阻止页面提交刷新
}

  

 

澳门新葡亰赌995577 1   

     
实现的功能里面的数据提交保存到数据库,同事对数据进行验证,这是要实现的效果,由于cms的原因这里只能添加html页面不能用aspx。

   
 1、页面布局好了首先你要添加jquery文件(这个百度自己下载)在写Ajax方法
前台是这样的。你会发现我只是用按钮提交的没有用表单,因为下面要拼接表格

<div class="yjdjfm">
    <div class="yjdjfd"> 
        <ul>
            <li>仪检名称:<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>规格型号:<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>出厂编号:<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>登记日期:<input id="txtyjdate" name="txtyjdate" type="text" value="" readonly /><strong>*</strong><i  style="color:#d0cfcf;">系统默认时间</i></li>
            <li>登&nbsp;记&nbsp;&nbsp;人:<input id="txtyjperson" name="txtyjperson" type="text" value="" /><strong>*</strong><i class="yz_person" style="display:none; color:red;">请填写您的姓名</i></li>
            <li>联系电话:<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/方法名”,