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

Posted 2020-12-10 zhangguorenmi

原文：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