项目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的值。


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

Ajax-表单传值的更多相关文章

  1. 移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. ios – 在applicationWillEnterForeground触发时更改UIView

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  3. UILabel导致应用程序在添加到视图时崩溃(仅限Xcode 6和iOS 8)

    我已将我的项目转换为Xcode6,以便为iOS8构建.但是,特定的UILabel会导致应用程序在添加到视图层次结构时崩溃.这是我收到的唯一错误日志:我无法在项目中的任何位置找到contentInsetsFromFonts方法.此外,我甚至无法在网上任何地方找到它的参考,包括Apple的文档.我没有为这个UIViewController使用NIB,因此UI是在loadView方法中构建的:该应用程序

  4. iOS 7通知中心与标签一样

    您可以试试,也许在将模糊应用到标签之前为模糊添加一点白色.

  5. iOS safari输入插入颜色

    我在iPhone设备上有一个小的CSS问题.我的搜索输入为蓝色,当用户关注它时,插入符号几乎不可见:在所有桌面浏览器中,即使在桌面Safari上,它也具有正确的颜色(白色).知道如何修复此问题并更改iOS设备上的插入颜色吗?

  6. 如何计算iOS 7中的实际字体大小(不是边框)?

    编辑:链接的“重复”问题仅涉及计算文本矩形.我需要在标签缩放之后计算实际字体大小,而不是字符串大小.此方法现已弃用:如何在iOS7中计算UILabel的字体大小,以缩小文字大小以适应?

  7. ios – 为什么在presentmodalviewcontroller调用时,navigationItem.titleView会左对齐?

    我正在使用UILabel作为导航栏的titleView.它工作正常,除了当我呈现模态视图控制器时,titleView从导航栏的中心移动到最左边.我在3.0及以上测试过.这是相关代码:截图:知道为什么会这样吗?

  8. ios – 在XCode中的UI测试期间无法访问自定义视图

    我们必须执行一些时髦的动画,这是我们最好的布局).问题是我无法访问此视图以模拟其上的点击.我可以使用app.staticText[“输入名称…”]访问标签,但是如果我点击它.记录我点击标签的会话将产生app.staticText[“输入名称…”

  9. ios – UITableView以编程方式调用滑动操作

    我有一个UITableView,用户可以向左滑动以显示动作.这一切都按预期工作.当用户点击单元格的某个部分时,我想触发这个.如何以编程方式调用此幻灯片动作?

  10. ios – 在SpriteKit中创建按钮:Swift

    我想在SpriteKit或SKScene中创建一个按钮,将视图发送到另一个视图控制器.我尝试使用“performSeguewithidentifier”,但显然SKScene不支持此功能.如何使用SpriteKit创建一个将视图发送到另一个视图的按钮?这是我尝试用来执行此操作的代码.带有“HomeButton.prepareForSegueWithIdentifier()”的行只是一个例子.它实际

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部