精华内容
下载资源
问答
  • 记两种简单的传值方式 jsp文件中使用 a标签进行传值,可以直接这样写 后台获取直接写 request.getParameter(“参数名”); 或者 后台获取用springmvc的@PathVariable @RequestMapping(value=“request/{name}”) ...

    前端向后台传值方式(不用js)
    记两种简单的传值方式
    jsp文件中使用 a标签进行传值,可以直接这样写

    <a href="url?参数名=xxx">
    

    后台获取直接写

    request.getParameter("参数名");
    

    或者

    <a href=request/zs>
    

    后台获取用springmvc的@PathVariable

    @RequestMapping(value="request/{name}")
    

    方法参数中写(@PathVariable(“name”))即可。

    展开全文
  • 这里前端html页面使用ajaxcontroller传递主要是form表单内容,且前端使用了layui框架。后端controller接收值可以有两种方法 1.前端cshtml代码(layui模板自带登录界面,使用时记得添加相关引用和依赖,这里...

    这里前端html页面使用ajax向controller传递的主要是form表单的内容,且前端使用了layui框架。后端controller接收值可以有两种方法

    1.前端cshtml代码(layui模板自带的登录界面,使用时记得添加相关的引用和依赖,这里已经封装在BundleConfig.cs中)

    
    @{
        ViewBag.Title = "Login";
    }
    
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        @Styles.Render("~/Content/css")
        <link href="~/Scripts/layui/src/css/login.css" rel="stylesheet" />
        @*<link href="~/Scripts/src/css/login.css" rel="stylesheet" />*@
    </head>
    <body class="layui-layout-body" style="background-color:black;padding-top:70px !important">
        <div class="layui-fluid" style="padding: 0px;">
            <canvas id="particle"></canvas>
            <br />
            <div class="layui-form layui-form-pane layui-admin-login">
                <div class="layui-admin-login-header">
                    <h1>登陆</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input required lay-verify="required" name="userAcc" class="layui-input" type="text" placeholder="请输入账号" autocomplete="on" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input required lay-verify="required" name="userPassword" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <img id="verifycode" style="height: 36px;
                    width: 108px;
                    margin-left: -15px;
                    margin-top: -8px;
        cursor: pointer;" src="@Url.Action("VerifyCode")" />
                    </label>
                    <div class="layui-input-block">
                        <input required lay-verify="required" name="VerifyCode" class="layui-input" type="text" placeholder="请输入验证码" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <input id="rememberMeCb" type="checkbox" name="rememberMe" class="layui-input" title="记住密码" lay-skin="primary">
                    <a href="javascript:;" style="margin-top: 10px;float: right;color: #009688;">忘记密码?</a>
                </div>
                <div class="layui-form-item">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">
                            <i class="layui-icon layui-icon-ok-circle"></i>登陆
                        </button>
                    </div>
                    @*<div class="layui-btn-container">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">
                            <i class="layui-icon layui-icon-add-circle"></i>注册
                        </button>
                    </div>*@
                </div>
                <!--底部-->
                <div class="layui-footer">@@捷普工夹具管理系统.All rights reserved.</div>
            </div>
        </div>
        @Scripts.Render("~/bundles/layui")
        @Scripts.Render("~/bundles/jquery")
        <script>
    
            window.onload = function () {
               
                
            }
             //登录 需要做表单提交给后台,  或者数据收集之后提交给后台
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    $ = layui.jquery;
    
                form.on("submit(login)", function (obj) {
                    var user = obj.field;
                    //这里checkbo的bool值需要用jquery手动获取再添加到user中
                    user.rememberMe = $('#rememberMeCb').prop("checked");
                    layer.load(3)
                    //使用ajax向controller发送表单数据
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("Login")",
                        data: user,
                        success: function (result) {
                            if (result.Success == true) { // 说明验证成功了,
                                alert("sucess");
                               
                            }
                            else
                            {
                                layer.msg(result.Message, {icon:5});
                            }
                            layer.closeAll("loading");
                        },
                        error: function (data) {
                            alert("错误" + data);
                        }
                    })
                })
    
                $("#verifycode").on("click", function () {
    
    
                    $("#verifycode").attr("src", "@Url.Action("VerifyCode")?" + Math.random());
                })
            })
        </script>
    </body>
    </html>
    
    
    

    html实际显示的页面如下:
    在这里插入图片描述
    这里要传递用户名,密码,验证码。是否记住密码,一共四个数据,点击登录时执行ajax方法前封装的数据user如下:(可设置debugger在调试窗口Source中c查看)
    在这里插入图片描述

    2.后端controller接收值

    这里可以使用两种方式

    (1)先定义相关viewmodel类,再使用model进行接收值

    1)在view文件夹下定义类LoginViewModel
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace FixureWebSite.Models
    {
        public class LoginViewModel
        {
            public string userAcc { get; set; }
            public string userPassword { get; set; }
            public string verifyCode { get; set; }
            public bool rememberMe { get; set; }
           
        }
    }
    

    注意类中定义的字段要与前端中传递的字段相同(如果是像例子中一样使用form直接传值,那么其name属性值需要一一对应)

    2)其对对应的controller中的action方法:
     public ActionResult Login(LoginViewModel model)
            {
    
                if (model.userAcc == "123" && model.userPassword == "123")
                {
                    return Json(new
                    {
                        Sucess = true,
                        Message = "登录成功"
                    });
                }
    
                return Json(new
                {
                    Sucess = false,
                    Message = "登录失败"
                });
    
            }
    

    对该action进行调试,可以看到model已经得到了user对象的值
    在这里插入图片描述
    同时该方法返回一个json字符串。。。

    (2)直接在controller的接收参数中指明要接收的值(注意参数名与name一一对应)

    此时对应的action方法:

      public ActionResult Login(string userAcc, string userPassword, bool rememberMe)
            {
    
                if (userAcc == "123" && userPassword == "123")
                {
                    return Json(new
                    {
                        Sucess = true,
                        Message = "登录成功"
                    });
                }
    
                return Json(new
                {
                    Sucess = false,
                    Message = "登录失败"
                });
    
            }
    

    通过设置断点调试,可以看到该方法已经获取了前端传来的值
    在这里插入图片描述

    参考:
    ASP.NET MVC5中View-Controller间数据的传递

    展开全文
  • 在做JavaWeb应用时候,前端往后端传值,一般是通过ajax的方式传递参数,那么参数改如何传递才不会出错呢?下面总结出我平时遇到几种情况: 1、第一种情况,传递多个变量。 前端: var params = {}; params....

    在做JavaWeb应用的时候,前端往后端传值,一般是通过ajax的方式传递参数,那么参数改如何传递才不会出错呢?下面总结出我平时遇到的几种情况:

    1、第一种情况,传递多个变量。

    前端:

    var params = {};
    params.id = data.caseId;
    params.content = value;
    params.title = title;
    $.ajax({
        async: false,
        type: "POST",
        url: "/test/update",
        data: params,
        success: function (data) {
            console.log(data);
        }
    
    });

     后端:

    @RequestMapping(value = "/test/update")
    @ResponseBody
    public void update(Long id, String content, String title) {
    }

     2、第二种情况,使用Json传递。

    前端:

    var param = {
        "title": "爪哇笔记",
        "content": "一个有趣的公众号",
        "author": "小柒2012"
    }
    param = JSON.stringify(param);
    
    $.ajax({
        type: "POST",
        url: "/test/queryCaseId",
        data: param,
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
           console.log(data);
        }
    });

    这里如果param是动态值,我一般都是将它设置为Map,然后进行转换。

    var caseIdMap = new Map();
    caseIdMap.set("caseid",1);
    
    var jsontest = JSON.stringify(this._strMapToObj(caseIdMap));
    function _strMapToObj(strMap) {
        let obj = Object.create(null);
        for (let [k, v] of strMap) {
            obj[k] = v;
        }
        return obj;
    }

     后端:

    @RequestMapping(value = "/test/query", produces = "application/json")
    @ResponseBody
    public WebResult query(@RequestBody Map<String, Object> conditionMap) {
    }

     3、第三种情况:传递单个变量

    前端:

    $.ajax({
        type: "POST",
        url: '/test/getDependency/' + 1,
        data: param,
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
           console.log(data);
        }
    });

     后端:

    @RequestMapping(value = "/test/getDependency/{caseId}", produces = "application/json")
    @ResponseBody
    public WebResult getDependency(@PathVariable Integer caseId) {
        
    }

    4、第四种情况:传递数组

    前端:

    var batchCaseList = ["1","2"];
    
    $.ajax({
        async:"false",
        type: "POST",
        url: "/test/batchDelete",
        data: params,
        traditional:true, // 这里必须加上
        success: function (data) {
            console.log(data);)
        },
        error: function () {
            alert("删除失败");
        }
    });

     后端:

    @RequestMapping(value = "/test/batchDelete")
    @ResponseBody
    public WebResult batchDelete(String appId, String[] caseIdList) throws Exception {
     }

    5、传递集合对象

    前端:

    var list = [];
    list.push({
        "username": "小柒2012",
        "mobile": "17762288888"
    });
    list.push({
        "username": "小柒2013",
        "mobile": "17762289999"
    });
    $.ajax({
        url: "/sys/listUser",
        data: JSON.stringify(list),
        type: "post",
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
    
        }
    });

    后端:

    @PostMapping("listUser")
    @ResponseBody
    public Result listUser(@RequestBody List<SysUser> list) {
    }

    总结一下:如果想传递几个变量,可以用第一种一一对应的方式,当然也可以用json的方式;如果传递数组注意加个参数 traditional:true;传递对象的时候,其实跟传递多个变量类似,只不过封装了一下。其它的情况根据上面的几种情况组合或者稍加改变即可。

    展开全文
  • 同步方式一般用于需要对触发结果执行动作。 比如点击button弹出新页面, 页面中获取到Response值,需要对弹出页面进行处理。 异步方式用于不需对触发结果执行动作。 比如触发结果是页面多加一些元素,或者取...

    同步方式一般用于需要对触发结果执行动作。

    比如点击button弹出新的页面, 页面中获取到Response的值,需要对弹出页面进行处理。

    异步方式用于不需对触发结果执行动作。

    比如触发结果是页面多加一些元素,或者取到或更新某些值。不需要对这些元素和值进行处理。

    同步方式

    //url处理数据的文件地址(c# url通常是处理前台数据的ashx文件在服务器的地址)
    function GetUrlResponse(url) {
        var xhttp;
        if (window.XMLHttpRequest)//code for all new browsers.
            xhttp = new XMLHttpRequest();
        else if (window.ActiveXObject)//code for IE5 and IE6
            xhttp = new ActiveObject("Microsoft.XMLHTTP"); 
        else
            alert("Your browser does not support XMLHTTP.");
        xhttp.open("POST", url, false);//false 表示同步 
        xhttp.send();
        if (xhttp.status.toString() == "200") {
            var doc = xhttp.responseText;
            return doc.toString();
        }
        else {
            return xhttp.responseText;
        }
    }

    异步方式

    //url处理数据的文件地址(c# url通常是处理前台数据的ashx文件在服务器的地址)
    function GetUrlResponse(url) {
        var xmlhttp;
        if (window.XMLHttpRequest)//code for all new browsers.
            xmlhttp = new XMLHttpRequest();
        else if (window.ActiveXObject)//code for IE5 and IE6
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    
        if (xmlhttp != null) {
            xmlhttp.onreadystatechange = state_Change(xmlhttp);//onreadystatechange句柄在下一句确定异步后触发
            xmlhttp.open("POST", url, true);//异步
            xhttp.send();//传递参数
        }
        else 
            alert("Your browser does not support XMLHTTP."); 
    }
    
    function state_Change(xmlhttp) {
        if (xmlhttp.readyState == 4) {
            //4="loaded"
            if (xmlhttp.status == 200) {
                // 200 = OK 
                //the code you want to process.
            }
            else {
                alert("Problem retrieving XML data.");
            }
        }
    }

     

    展开全文
  • 后端是ASP程序情况下,保持前端Javascript和Asp之间传值的统一编码可以使用以下函数进行处理: 编码:escape(string) 解码:unescape(string) 这两个函数在JavaScript和Asp里都存在,而且功能完全一样,只要任何...
  • 本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(Controller...我们回顾下在ASP.NET WebForms中,页面之间最常用的传值方式,有以下几种: a). QueryString(也叫URL传值) b). Session c). Cookie d)...
  • 前端我们不仅可以通过get请求携带参数的方式向服务端传数据; https://127.0.0.1/index/?id=1&name=alex Django也允许通过,path路径的方式向server端传值; 注意事项:按位置,和按关键字路由系统只能用1...
  • 前端向后端传参,有时候用一个实体来接收参数并不满足我们业务逻辑,我们可能会用一个集合来接收参数。 用集合接收参数分为两种:第一种是直接用一个集合类型来接收,第二种是在一个实体类中包含集合类型参数 ...
  • 当别人请求接口时,客户端服务器传递参数时,参数中“+”全部变成了空格,原因是... 方法二:修改后端,将空格替换为“+”,这种方式只适用于参数中有‍“+”没有空格情况。 例:String a = reuqest.‍get...
  • NET MVC 5 Web编程5 -- 页面传值的方式本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(ControllerView传值):前端向后端传值(ViewController传值):Action与Action之间的传值. 回顾 ...JS设置弹出小...
  • 优秀博客地址摘抄

    2019-03-12 17:20:45
    1.前端向后端传值以及后端接收数据几种方式
  • 关于JSON前后交互

    2020-12-05 21:09:53
    使用ajax像后端传值使用url拼接的传值方式,不可以使用post的请求,会报错 传到后端(servlet)可以使用request.getParameter(“Json的Key”)进行接收 使用response.getWriter().write(JSONObject.toJSON(map)....
  • Vue 学习笔记第 4 篇

    2020-07-04 15:45:24
    路由3.1 概念后端路由前端路由3.2 vue-router安装的方式3.2.1 直接下载/cdn - - 在网页里直接开发的方式3.2.2 NPM - - webpack构建工具进行开发的方式3.3 vue-router 使用3.3.1 router-view方式3.3.2 rou
  • 一般情况下,比如在登陆界面,因为主要只涉及到登陆功能,我们会使用form表单提交的方式向后端Action传值以及跳转页面 举例: 前端Jsp页面中表单提交方法: <form action="<%=basePath%>login/...
  • 这几天做项目遇到一个问题,需要前端获取输入文本html形式,传送到后端,再以二进制流...第二步:前端向后端传值(html代码) 知道两种方式:1、把html内容作为字符串传到后端后端再转成二进制流存数据库 ...
  • c#面试问题总结

    2019-06-06 23:28:00
    1.你是怎么做到前端向后端传值的时候防止参数被篡改。 2.用户获取像后端获取数据时候,用什么方式获取客户端ip. 3.ajax访问数据原理是什么,jsonp跨域原理. 4.数据库锁概念. 5.const 与 readonly 区别...
  • 后端是ASP程序情况下,保持前端Javascript和Asp之间传值的统一编码可以使用以下函数进行处理: 编码:escape(string) 解码:unescape(string) 这两个函数在JavaScript和Asp里都存在,而且功能完全一样,只要...
  • 如果前端传入是正常表单数据,那么后端使用 @RequestParam(value=“ids”,required=false)List ids,接收参数 错误原因二: 使用Spring MVC时后台传值,使用注解@RequestParam,使用了PUT请求方法 解决方式:...
  • Required List parameter 'XXX' is not present

    万次阅读 2018-10-15 20:05:17
    错误描述: Required List parameter ‘XXX’ is not present 错误原因: 使用Spring MVC时后台传值,使用...如果前端传入是正常表单数据,那么后端使用 @RequestParam(value=“XXX”,required=false)Lis...
  • 前端选用 layui 2.3.0,以 html 形式保存,通过 js 向后端请求数据 后端 后端选用 SpringBoot 2.0.2 进行快速原型开发,内部采用SSH(Spring + SpringMVC + Hibernate) 特色 Hibernate 采用 SpringBoot-...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

后端向前端的传值方式