zoukankan      html  css  js  c++  java
  • 【总结-前台发送】前台页面增删改查数据发送并调用后台控制器方法

    原文:https://blog.csdn.net/weixin_44549313/article/details/89786298


    前台页面增删改查数据 - 发送并调用 - 后台控制器方法

    我们在做一些数据的修改和数据的新增、删除等,都会涉及到页面数据的传输,因为我们要调用控制器方法

    例如:

    1、要删除一条数据,你要传输要删除的数据所对应的ID,这样才能删除对应的数据。否则是没法删除对应的数据的。

    2、新增数据,这个就像用户注册账号是一样的,用户会输入他自己的身份证号码、姓名、性别、联系电话等,用户填完后我们就要把他的数据进行保存,这是就会用到页面数据的传输,从而把数据保存到数据库。

    常见页面数据传输的方法有:

    1、Post提交     2、get提交    3、getJSON提交     4、AJAX提交

    5、插件提价

    Post提交语法格式:

     

    Post提交它有3个参数,第一个是URL链接,第二个是要传输的对象,第三个是回调函数

     

    Get提交语法格式:

    get提交它也有3个参数,第一个是URL链接,第二个是要传输的对象,第三个是回调函数

    你们对照一下发现其实他们两个没什么区别,其实每错,在写法上他们是没有什么区别,都是一样的写法,一样的参数。它们真的区别在于这。

    Post提交可以传输大量的数据,get传输的数据有限,get提交会把传输的数据暴露到链接上,而post不会暴露数据。

    虽然get提交传输的数据量小,但稳定,不会报什么错,而post提交虽然可以传输大量数据,但没有get提交稳定。

    getJSON提交语法:

     

    getJSON提交它有3个参数,第一个是URL链接,第二个是要传输的对象,第三个是回调函数

    AJAX语法:

    • 第一步:创建对象:

    这是为了适应为了应对所有的现代浏览器的写法

    var xmlhttp;
    
    if (window.XMLHttpRequest)
    
      {// code for IE7+, Firefox, Chrome, Opera, Safari
    
      xmlhttp=new XMLHttpRequest();//
    
      }
    
    else
    
      {// code for IE6, IE5
    
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    
      }
    • 第二步:new出一个对象

      //new出一个对象,用来装要传输的参数

      var fd = new FormData();

    • 第三步:发送请求

      xmlhttp.open("提交类型", "URL");

      xmlhttp.send(fd);//发送数据

    • 第四步:做出响应

    有时候我们还会遇到,要提交一下图片,但get、post、getJSON都没法实现,这时候我们就可以引用插件来进行提交。

    例子:

    如上图所示:要提交的内容有图片。

    我用的是下面这个插件的ajaxSubmit方法进行提交。

    代码如下:

            $("#btnSaveInsert").click(function () {
    
                var TeacherIDNum = $("#TeacherIDNum").val();//身份证号码
    
                var TeacherNumber = $("#TeacherNumber").val();//教师编号
    
                var UniformAuthenticationCode = $("#IsUniformAuthenticationCode").val();//认证码
    
                var TeacherName = $("#TeacherName").val();//教师名称
    
                var AcademeID= $("#IsAcademe").val();//学院名称
    
                var AppellationID = $("#IsAppellation").val();//职称ID
    
                var ResearchSectionID = $("#IsResearchSection").val();//教研室ID
    
                var ContactNumber = $("#ContactNumber").val();//联系电话
    
                if (AcademeID > 0 && AppellationID > 0 && ResearchSectionID > 0
    
                    && TeacherIDNum != "" && TeacherNumber != "" &&
    
                    UniformAuthenticationCode != "" && TeacherName != ""
    
                    && ContactNumber != "") {
    
                    var layerIndex = layer.load(0);
    
                    $("#formInsertExaminee").ajaxSubmit(function (returnJson) {
    
                        //关闭加载层
    
                        layer.close(layerIndex);
    
                        if (returnJson.State == true) {
    
                            //关闭模态框
    
                            $("#modInsertExaminee").modal("hide");
    
                        }
    
                        //提示
    
                        layer.alert(returnJson.Text, { icon: 0, title: '提示' });
    
                    });
    
                }
    
                else {
    
                    layer.msg("请填写完整!");
    
                }
    
            });

    这个方法提交要注意一下几点:

    1、URL不是写在方法上,而是写在了form表单的action和method这两个属性上。

    action:”URL”                     

    method:”提交的数据类型 ”        

    2、页面上input的name值要和控制器接收数据的名称相同,不相同是没办法接收到对应的数据的。

     
    ————————————————
    版权声明:本文为CSDN博主「徦如没有你以后」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_44549313/java/article/details/89786298

  • 相关阅读:
    Ubuntu 永久修改DNS
    三大主流MQ的组织结构
    nginx基本配置
    CentOS7安装RabbitMQ
    单个表上亿行数据的主键、索引设计,及分页查询
    [SQL]行列转换
    《团队协作的五大障碍》读后感
    【2021-09-26】面对困难是未来绝不后悔的事情
    【2021-09-25】摇摆不定反逼自己脚踏实地
    【一句日历】2021年10月
  • 原文地址:https://www.cnblogs.com/zhangguorenmi/p/13096818.html
Copyright © 2011-2022 走看看