Ajax-表单传值

项目3.1也告一段落。

从1.0到3.0一直都在做基础系统，3.0交接后就开始做考试系统3.1。换了项目自己的感触更加深刻。只要一个项目整明白了，做任何类似项目都是一样的。

前台用到的一些技术，汇总一下。

1form表单传值

用于要传送的值比较多的时候，更加方便。在对应的页面上写上添加一个from表单。方式是post

 <form id="editfrom"  method="post" action="/Student/EditStudent">
        <input name="id" type="text" value="" style="display: none">
        <div class="easyui-tabs" style="width: 700px; height: 300px;">
            <div title="个人信息" style="padding: 0px">
    
                <table style="margin: auto">
                     <div class="fitem" style="margin-left: 90px;">
            <label>学    号：</label>
            <input id="editStudentNo" name="editStudentNo" class="easyui-validatebox textbox" data-options="required:true">

            <label>姓    名：</label>
            <input id="editName" name="editName" class="easyui-validatebox textbox" data-options="required:true">
                         
        </div>
        <div class="fitem" style="margin-left: 90px;">
            <label>性   别：</label>
            <input
                name="editSex"  id="editBoy" style="width: 20px" type="radio" data-options="required:true" value="0"  >
            男   
			<input id="editGril" style="width: 20px" name="editSex" type="radio" data-options="required:true" value="1">
            女
               
            <label>所属班级：</label>
            <input id="editCla" name="editCla" style="width: 160px" class="easyui-combobox"  data-options="required:true" />
        </div>
                    <tr>
                        <td>民族：</td>
                        <td>
                            <input type="text" id="editNation" class="easyui-textbox" name="editNation"/></td>
                        <td colspan="2" rowspan="5">
                            @*<img src="../../Images/个人信息.jpg" /> *@

                            <div id="fileError"></div>
                            <div id="fileName"></div>
                            <img id="studentImg" src="" style="width: 100px;" />

                            <input type="button" id="btnupload" onclick="uploadFile()" value="上传">
                        </td>
                    </tr>


                    <tr>
                        <td>手机号：</td>
                        <td>
                            <input type="text" id="editCellPhoneNumber" class="easyui-textbox" name="editCellPhoneNumber"/></td>
                    </tr>
                    <tr>
                        <td>身份证号：</td>
                        <td>
                            <input type="text" class="easyui-textbox" id="editCreditCardNo" name="editCreditCardNo" /></td>
                    </tr>
                    <tr>
                        <td>电子邮件：</td>
                        <td>
                            <input type="text" id="editEmail" class="easyui-textbox" name="editCreditCardNo" /></td>
                        <td colspan="2">
                            <input type="file" class="easyui-linkbutton" accept="image/gif,image/jpeg,image/png,gif|jpg|png" multiple="multiple" id="fileToUpload" onchange="fileSelected();" /></td>

                    </tr>

                    <tr>
                </table>
             
            </div>

            <div title="学籍信息" style="padding: 10px">
                <table style="margin: auto">
                    <tr>
                        <td style="text-align: right">籍贯:</td>
                        <td>
                            <input id="editOrgin" name="editOrgin" class="easyui-validatebox textbox" type="text" />
                        </td>
                        <td style="text-align: right">政治面貌:</td>
                        <td>
                            <input id="editPoliticalStatus" name="editPoliticalStatus" class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>


                    <tr>
                        <td style="text-align: right">曾用名:</td>
                        <td>
                            <input id="editPreviousName" name="editPreviousName"  class="easyui-validatebox textbox" type="text" />
                        </td>
                        <td style="text-align: right">准考证号:</td>
                        <td>
                            <input id="editExamineeNumber" name="editExamineeNumber"  class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right">何时入团（党）:</td>
                        <td>
                            <input id="eidtEntryPartyTime"  name="eidtEntryPartyTime"  class="easyui-validatebox textbox" type="text" />
                        </td>
                        
                    </tr>
                    <tr>
                        
                        <td>
                          <input id="editID" name="editID" class="easyui-validatebox textbox" type="text"  style="visibility:hidden"/>
                        </td>
                        <td>
                          <input id="editDirectionID" name="editDirectionID" class="easyui-validatebox textbox" type="text"  style="visibility:hidden"/>
                        </td>
                       
                    </tr>
                </table>
                
            </div>

            <div title="家庭信息" style="padding: 10px">
                <table style="margin: auto">
                    <tr>
                        <td style="text-align: right">家庭地址:</td>
                        <td>
                            <input id="editHomeAddress"  name="editHomeAddress"   class="easyui-validatebox textbox" type="text" />
                        </td>

                        <td style="text-align: right">家庭电话:</td>
                        <td>
                            <input id="editHomeTelephone" name="editHomeTelephone"  class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: right">父亲姓名:</td>
                        <td>
                            <input id="editFatherName" name="editFatherName"   class="easyui-validatebox textbox" type="text" />
                        </td>
                        <td style="text-align: right">父亲电话:</td>
                        <td>
                            <input id="editFatherPhone" name="editFatherPhone"   name="editFatherPhone" class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: right">母亲姓名:</td>
                        <td>
                            <input id="editMotherName"  name="editMotherName" class="easyui-validatebox textbox" type="text" />
                        </td>
                        <td style="text-align: right">母亲电话:</td>
                        <td>
                            <input id="editMotherPhone"   class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: right">火车终点站:</td>
                        <td>
                            <input id="editTrainDestination" name="editTrainDestination" class="easyui-validatebox textbox" type="text" />
                        </td>

                        <td style="text-align: right">备注:</td>
                        <td>
                            <input id="editNote" name="editNote"  class="easyui-validatebox textbox" type="text" />
                        </td>
                    </tr>
                </table>
               
            </div>

        </div>

    </form>

然后再对应的js上写提交事件触发后调用方法。

function ok() {

    $('#editfrom').form({
        url: "/Student/EditStudent",//调用controller的编辑
        onSubmit: function () {
        },success: function (data) {
            $('#dg').datagrid('reload');//重新加载页面
            $.messager.show({
                title: '提示消息',msg: '编辑学生信息成功！',timeout: 5000,showType: 'slide'
            });
            $('#editSmallDialogs').window('close');//关闭页面
        },error: function (data) {
            $.messager.alert("错误","添加失败，请联系管理员！","error");
        }
    });
    $('#editfrom').submit();

}

Controllers获取值的时候应该这样

    Nation = Request["editNation"],

这里的“editNation”对应的页面中控件的name的值。

多看帮助文档，多查手册很重要。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!