Ajax-表单传值

项目3.1也告一段落。

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

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

1 form表单传值

  用于要传送的值比较多的时候，更加方便。在对应的页面上写上添加一个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的值。

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