Ajax-表单传值

前端之家收集整理的这篇文章主要介绍了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的值。


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

原文链接:https://www.f2er.com/ajax/163130.html

猜你在找的Ajax相关文章