前台与后台的一些交互案例

最新推荐文章于 2022-10-24 13:51:22 发布
最新推荐文章于 2022-10-24 13:51:22 发布
阅读量822 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42117592/article/details/80961924
版权

1.ajax实例

①    

function sendValidateCode(obj){

        var beforeSendCheck =checkFormBeforeSendSms();

        if (!beforeSendCheck) {

            return;

        }

设置时间计时器

        var countdown = 60, timerTag;

获取id为moblie的值去空格以后 付给你 变量var  mobile

        var mobile=$("#mobile").val().trim();

获取..      

 //图片验证码

        var randCode = $("#randCode").val().trim();

用ajax 传输;url传输给哪一个action,type为传输方式有post,get

Datatype:”传输回来的值的格式”(如果不指定,ajax会自动解析)

Async是否来进行异步传输,data传过去的数据有什么,

Success: function  (data){}  data代表回传的数据,方法体是回传以后要进行的操作, error:function(data){}失败以后要怎样处理

Complete: function(){}  完成以后要做的  操作,不管是成功还是失败.

(ajax中对返回数据处理用逗号隔开)

       $.ajax({

            url: "verifyCode",

            type: "post",

            dataType: "json",

            async:false,

            data: {mobile:mobile,randCode:randCode},

完成之前要做的操作         

  beforeSend: function (){

                $("#sendSms").attr("disabled","disabled");

                $(obj).css("background-color","#999");

            },

            success: function (data) {

                if(data.result=="success"){

                    alert("验证码发送成功，请注意查收！")

                   setTime(obj,countdown,timerTag);

                }else{

                   alert(data.message);

                    $("#verifyImg").click();

                    countdown = -1;

                }

            },

         完成以后  要做的操作

            complete: function () {

                $("#sendSms").removeAttr("disabled");

②/*上传图片start*/  给按钮加 事件

            $("#licenseImg").on("change",function () {

               uploadPic("#licenseImg","#licensePic");

            })

            $("#licenseImg2").on("change",function () {

                uploadPic("#licenseImg2","#licensePic2");

            })

            $("#corLicenseImg").on("change",function () {

                uploadPic("#corLicenseImg","#corLicensePic");

            })

            function uploadPic(data,pic){

 

                var formData = new FormData();

                formData.append("file",$(data).get(0).files[0]);

                $.ajax({

                    url: "${ctx}/front/register/upload",

                    type: "POST",

                    data: formData,

                    dataType: "json",

                    processData: false,

                    contentType: false,

                    success: function (res) {

                        //如果上传失败

                       if (res.code> 0) {

//                           alert(res.msg,'warning')

                        }else{

                            //上传成功

                           $(pic).val(res.data.src);

                           layer.msg("图片上传成功",{icon:1});

                        }

                    }

                });

            }

③  为后台传入多个参数 

$.ajax({

         type : "post",

         url : "${ctx}/front/doCorLogin",

         data : {

            username :data.field.username,

            password : $("#enc_password").val(),

            randomVeryfyCode :data.field.randomVeryfyCode,

            action :data.field.action,

            appmark:data.field.appmark,

            gotoUrl :data.field.gotoUrl

         },

         dataType : "json",

         beforeSend:function(){

            $("#submitBtn").text("登录中...").attr("disabled",true).css({"color":"#000000" ,"background":"#ccc"});

         },

         success : function(result) {

            $("#submitBtn").text("登  录").removeAttr("disabled",false).css({"color":"#fff" ,"background":"#e22721"});

            if(result.success){

                var gotoUrl = $('#gotoUrl').val();

                var gotoUrlFlag =result.params.gotoUrlFlag;

                if(gotoUrlFlag == ""){                 

                   top.location.href= 'corlogin';

                }else {

                   var ticket = result.params.ticket;

                   location.href =gotoUrlFlag + '?ticket='+ticket + "&gotoUrl="+gotoUrl;;

                }

            }else{

                if(result.params.adminerror == "1"){

                   layer.alert("系统管理员请从后台登录", function(){

                      location.href='../login.jsp';

                   });

                }else{

                   layer.msg(result.message);

                   $("#verifyImg").click();

                   $("#randomVeryfyCode").val("");

                }

            }

         },

         });

   });

④

$(function(){

      $('#loginform').validity(function(){

         $("#sub").toggleClass("sub");

         $('#username').require('请填写用户名');

         $('#password').require('请填写密码');

         $('#randomVeryfyCode').require('请填写验证码');

      },{

         beforeSubmit:function(result) {

            /*$("#enc_username").val(RSAencode($("#username").val()));

            $("#enc_password").val(RSAencode($("#password").val()));*/

            $.ajax({

                type : "post",

                url : "../sys/mybatis/getkey",

                data : {},

                dataType : "json",

                async: false,

                success : function(data) {

                        //data为获取到的公钥数据

                        var pubexponent =data.pubexponent;

                        var pubmodules =data.pubmodules;

                        setMaxDigits(200); 

                        var key = new RSAKeyPair(pubexponent, "", pubmodules);

                        var password=$("#password").val();

                        var encrypedPwd = encryptedString(key,encodeURIComponent(password));

                        $("#enc_password").val(encrypedPwd);

                        var name = $("#username").val();

                        $("#enc_username").val(name);

                },

                });

         },

         success:function(result){

            if(result.success){

                var gotoUrl = $('#gotoUrl').val();

                var gotoUrlFlag =result.params.gotoUrlFlag;

                if(gotoUrlFlag == ""){                 

                   top.location.href= 'perlogin';

                }else {

                   var ticket = result.params.ticket;

                   location.href =gotoUrlFlag + '?ticket='+ticket + "&gotoUrl="+gotoUrl;;

                }

            }else{

                if(result.params.adminerror == "1"){

                   alert("系统管理员请从后台登录", "", function(){

                      top.location.href='../login.jsp';

                   });

                }else{

                   if(result.message.indexOf("您正在进行法人用户登录，用户名或密码不正确!") > -1){

                      $("#SecretCodeErrorNotice").css('display', 'block');

                      window.t =window.setInterval("hideSecretCodeErrorNotice()",10000);

                      $('#verifyImg').click();//李德隆加于20160324

                      return;

                   }else{

                      $("#userNotice").css('display', 'block');

                      $("#userNotice").text(result.message);

                      window.t =window.setInterval("hideNotice()",3000);

                      $('#verifyImg').click();//李德隆加于20160324

                      return;

                   }

                }

            }

         }

      });

⑤ 传入参数案例

 

$.ajax({

         type : "post",

         url : "${ctx}/front/cor/register/realName_auth",

         data : {

            type : "1",

            name : $("#name1").val(),

            regNumber : $("#regNumber").val(),

            orgNumber : $("#orgNumberForBusiness").val(),

            realName :$("#realName1").val(),

            nation :$("#nation1option:selected").val(),

            cardNumber:$("#cardNumber1").val(),

         },

         dataType : "json",

         beforeSend:function(){

            $("#submitdata1").text("注册中...").attr("disabled",true).css({"color":"#000000" ,"background":"#ccc"});

         },

         success : function(result) {

            $("#submitdata1").text("提交").removeAttr("disabled",false).css({"color":"" ,"background":""});

            if(result.success){

                window.location.href= "${ctx}/front/cor/register/toRealnameSuccess";

            }else{

                layer.msg(result.message);

            }

         },

⑥url传参

$.ajax({

         //几个参数需要注意一下

         type : "POST",//方法类型

         //dataType: "json",//预期服务器返回的数据类型

         url : "${ctx}/front/perSetting/myEMS_del?id=" + id + "&userid="

                + userid,//url ,//url

         // data:$('#dataForm').serialize(),

         success : function(dates) {

            $("#myEmsList").html(dates);

            var existnum = parseInt($("#exist").text());

            $("input[name='res']").click();

            $("#exist").text(existnum - 1);

            $("#able").text(11 - existnum);

         },

         error : function() {

         }

      });

   }

⑦ 传参  及action接收

    

   function setDefault(iid, userid) {

      $.ajax({

         //几个参数需要注意一下

         type : "POST",//方法类型

         //dataType: "json",//预期服务器返回的数据类型

         url : "${ctx}/front/perSetting/myEMS_setDefault?iid=" + iid

                + "&userid=" + userid,//url

         // data:$('#dataForm').serialize(),

         success : function(dates) {

            $("#myEmsList").html(dates);

         },

         error : function() {

         }

      });

   }*/

   @RequestMapping({"/myEMS_setDefault"})

   publicModelAndView myEMS_setDefault(Model model, HttpServletRequest request,HttpServletResponse response, HttpSession session) {

        

            //暂时赋值为2

      try {

         String iid =request.getParameter("iid");

         String userid =request.getParameter("userid");     

        

         userEmsService.update("0", userid, null);        

         userEmsService.update("1", "", iid);

        

         List<ComplatOutsideUserEms>list = userEmsService.findByUserid(userid);

         model.addAttribute("list", list);

     

      }catch(Exception e) {

          printTrace("UserEmsController", e);

         logger.error("<--异常位置:UserEmsController.myEMS_del(),时间:"+TimeHelper.getCurrentTime()+",原因:"+e.getMessage()+"-->");

      }

        ModelAndView modelAndView = new ModelAndView("per/userCenter/ems/ems_list");

        return modelAndView;

}

⑧ 传参

form.on('submit(submitBtn)', function(data){

        $.ajax({

             type:"post",      

             url:"sendVerificationMailUserPwdRecover",

           data:{"inputByGuest":$("#inputByGuest").val(),"randCode":$("#randCode").val(),"inputByGuestEmail":$("#email").val()},  

            dataType:'json',

            success:function(json){//如果成功与第三方连接         

                if($.trim(json) != ""){ 

                   var isSuccess = json.success;//此字段我没用。

                   varcode =json.code;

         });

2.转发   其他页面或者  action

①    function rgAuth(v,n){

      var url="${ctx}/front/register/artificialAuth?unit="+v+"&cor="+n;

        window.location.href =encodeURI(url)

   };

②   $(function () {

            $("#cancel").click(function () {

                $("#msg").hide();

            })

 

            $('#agentForm').validity(

                function () {

                    var beforeSendCheck =checkBrower();

                    if (!beforeSendCheck) {

                        //$("#msg").show();

                       return false;

                    }

                },

                {

                    beforeSubmit: function (result) {

                    },

                    success: function (result) {

                        if (result.success) {

                            var url = "${ctx}/front/register/artificialAuth_step2";

                           window.location.href=encodeURI(url);

                        } else {

                            var resultMessage = result.message;

                           alert(resultMessage, 'warning');

                            $('#verifyImg').click();

                        }

                    }

                });

 

        });

③  给元素加属性

$(function(){

  

   if("per" == typeEntity){

                   $('#inputByGuest').attr("placeholder","请输入登录名/手机号/身份证号");

     

   }else{

      $('#inputByGuest').attr("placeholder","请输入用户名/工商号/信用代码/组织机构码");

   }

  

})

④给元素加css

$("#bm").click(function(){

   $(this).addClass("bm").removeClass("bm1");

   $("#zt").addClass("zt").removeClass("zt1");

   $("#nr").css("height","auto");$("#nr1").css("height","0");

   });

步步为营fs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后台交互案例
11-08
前端用jquery的ajax方法发送请求到C#后台，后台收到请求后返回请求结果案例
SSM整合前台后台交互的三级省市联动
03-23
在实现"SSM整合前台后台交互的三级省市联动"时，关键步骤包括： 1. **前端页面**：通常使用HTML、CSS和JavaScript构建，其中JavaScript负责异步请求（Ajax）。Ajax技术允许我们在不刷新整个页面的情况下与服务器...
4.案例交互
free_and_strong的博客
08-20 395
写vue页面： 拆分组件 静态组件（无交互） 动态组件： 初始化数据 交互 传数据，自动收集收据：v-model 监听事件 :@click 组件通信： &lt;list :comments="comments"/&gt; //传的是值 &lt;list comments="comments"/&gt; //传的是文本 接收属性： 1. props:[‘comments...
6个超酷智能交互案例分享
shadowcz007的博客
02-24 5838
本次的案例分享主要集中在智能交互方向，主要集中在4个方面：智能设备如何增强情感化设计全息投影如何运用在实际商业领域智慧家庭的终端设计如何陪伴宠物私域流量借助图像识别的智能营销玩法- 机器...
前台后台交互实例
qq_27607447的博客
08-06 113
前台 function initVisitTable(id, period){ $.post('/planRest/post', {path:'/visit/taskObjectByTaskId',taskId:id,period:period,userCode:userCode},function(result){ // tcRest('post','http://ip:port/visit/...
前后端综合案例
m0_58680865的博客
07-28 592
前后端综合案例分析（增删改查） 一、User表 （一）查询 1.在js文件夹中创建user.js文件，在user.html文件中导入axios，vue框架和user.js文件 <script src="/js/vue.js"></script> <script src="/js/axios.min.js"></script> <script src="/js/user.js"></script> 注意：在路径前面要加"/",斜杠代表的
SQL.rar_sql做后台_数据库前台
09-24
标题中的“SQL.rar_sql做后台_数据库前台”表明这是一个关于使用SQL作为后台数据库技术，并与前端（可能是C#）交互的项目。这个压缩包可能包含了实现这一功能的完整代码、数据库设计以及相关的文档资料。 在描述中...
PHP后台+前台.zip
08-02
【标题】"PHP后台+前台.zip"所包含的是一个基于PHP构建的后台系统，结合了Smarty模板引擎、Bootstrap前端框架以及PHPExcel库。这个系统显然旨在提供一套完整的网站管理解决方案，尤其是针对内容管理和用户交互。 ...
ASP.NET完整实现查询前台、后台视频
06-05
在这个案例中，可能是使用Web Forms或者MVC模式，因为这两种模式都支持前后台交互和数据查询操作。 前台部分主要涉及用户界面的设计和交互。HTML（超文本标记语言）是构建网页的基础，通过HTML可以定义页面结构。在...
前后台程序框架实例2
weixin_30940783的博客
07-08 152
/****************************************************作 者:温子祺*联系方式:wenziqi@hotmail.com*说 明:前后台程序框架实例2 ***************************************************/ 前后台程序框架实例2对比前后台程序框架实例1虽然在实现功能上没有...
网站开发前后台模板20个例子
12-26
DIV+CSS国外房地产网站模板 DIV+CSS商务公司专用模板 DIV+CSS公司模板 DIV+CSS饰品网站电子商务模板 DIV+CSS足球俱乐部模板 DIV+CSS游戏主页模板 统计分析科技公司CSS模板 等等
一个从后台直接传输到后台的jquery easyui 的json页面
xiangyunxue的专栏
03-15 549
String path = request.getContextPath();     String basePath = request.getScheme() + "://"             + request.getServerName() + ":" + request.getServerPort()             + path + "/"; %>
（转）SpringMVC学习(十)——SpringMVC与前台的json数据交互
05-27 4330
http://blog.csdn.net/yerenyuan_pku/article/details/72514022 json数据格式在接口调用中、html页面中比较常用，json格式比较简单，解析也比较方便，所以使用很普遍。在SpringMVC中，也支持对json数据的解析和转换，这篇文章主要总结一下在SpringMVC中如何和前台交互json数据。 两种交互形式 Spring...
前后端交互(小白教学)
最新发布
一枚数学专业的小码农的博客
10-24 4万+
前后端交互小白教学,超详细
前端和后端是如何交互的
weixin_46475607的博客
11-24 6214
iOS，H5，安卓等前端开发的如何跟后台进行交互. 原创主人:http://m.blog.csdn.net/article/details?id=51316510 应该怎么去规避一些不该属于自己的任务而被后台强加于自己?等等问题, 关于交互会给大家详细介绍9个方面的细节: 1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。 2.接
ssm框架下，前台与后台的数据交互
盘子李的博客
02-22 3万+
ssm框架下，js页面通过json将数据发送到后台，后台处理之后，再将数据发送到前台。 在前台，要将用户名和邮箱发送到后台，先将用户名和和邮箱转成json形式的数据，在通过ajax发送到后台，其中url为后台要处理数据的地址。前台主要代码如下，其中User是一个实体类，有id,name,email,password等属性。 var user_json = { ...
客户交互与实物生产过程集成：服务运作管理的关键策略
服务生产通常被划分为前台和后台两个部分：前台涉及直接与客户交互的环节，如客户服务、咨询等，它是服务质量的关键体现；而后台则是不直接与客户接触的过程，如实物产品的生产、员工培训和设施维护等，这些支持性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值