Home Tags Posts tagged with "前后端交互"

前后端交互

0 112

目的:调用后端逻辑成功后,得到返回信息

采用success 函数 接收的 msg 就是后端返回的 JSON 对象

由于返回的是 JSON 对象,因此需要 JSON.stringify() 转换为JSON 字符串

 

后端代码:

 

 

前辈实例:

0 72
layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table;

    table.render({
        elem: '#currentTableId',
        url: '/admin/fansMsg',接口地址
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [[ 对应字段渲染
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'userName', width: 80, title: '用户名'},
            {field: 'gender', width: 80, title: '性别', sort: true},
            {field: 'email', width: 200, title: '邮箱'},
            {field: 'score', width: 80, title: '评分', sort: true},
            {field: 'classify', width: 80, title: '职业'},
            {field: 'wealth', width: 135, title: '财富', sort: true},
            {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line'
    });

后端:
/**
 * 获取粉丝信息
 */
@GetMapping("/fansMsg")
@ResponseBody
public JSONObject showFansMsg(){

    JSONObject result = new JSONObject();
    // 店铺粉丝列表
    QueryWrapper wrapper = new QueryWrapper();
    wrapper.eq("sub_storeid",1);
    List fanslist = userService.list(wrapper);
    result.put("code", "0");
    result.put("msg", "操作成功!");
    result.put("data", fanslist);
    return result;
}

总结:后端接口获取数据库数据,将数据转化为json格式,再返回json格式!前端通过ajax的url调用后端接口得到数据,通过 cols: [[ 对应字段渲染 进行字段渲染!!!

0 76

前端按钮调用Controller  使用ajax调用

 

个人实现:

 

 

后端代码:


 

利用Ajax调用controller方法并传递参数

原文链接:https://blog.csdn.net/taxuezcy/article/details/80682687

 

 

不提交表单获取文本框的值,使用js

js:

文本框

 

 

前端向后台传值的5种方式总结

JSai 2019-06-05 21:35:54 26524 收藏 175
文章标签: 前台向后台 传值 from表单传值 ajax传值 js传值
版权
一、form表单提交(常用)
from表单把所有属于表单中的内容提交给后台,例如输入框,单选框,多选框,文本域,文件域等。

在后台可通过对应的name属性获取相应的值。
from表单中的action属性标识提交数据的地址。
method属性指明表单提交的方式。
<form action=”demo.do” method=”post”>
用户名:<br>
<input type=”text” name=”username”><br>
密码:<br>
<input type=”password” name=”password” ><br><br>
<input type=”submit” value=”提交”>
</form>

二、JQuery中的ajax提交(常用)
JavaScript中也有ajax提交,但是代码太多,所以JQuery对JS中的ajax进行了简化。引入JQuery相应的包即可使用。一般格式为:

$.ajax({
url: “TestJsonServlet”, //提价的路径
type: “post”, //提交方式
data: {
//向后台提交的数据
},
dataType: “JSON”, //规定请求成功后返回的数据
success: function (data) {
//请求成功之后进入该方法,data为成功后返回的数据
},
error: function (errorMsg) {
//请求失败之后进入该方法,errorMsg为失败后返回的错误信息
}
});

总结:以上两种方式如果不显示的指定post提交方式,则默认的提交方式为get方式提交。此外,ajax中的url也可以直接通过字符串拼接,然后向后台提交数据,这种方式为get方式提交。下面详细说明

三、通过url字符串拼接向后台提交数据
直接在ajax中url拼接数据
$.ajax({
url: “TestJsonServlet?id=”+id+”&gender=”+”男”, //提价的路径
type: “get”, //提交方式
dataType: “JSON”, //规定请求成功后返回的数据
success: function (data) {
//请求成功之后进入该方法,data为成功后返回的数据
},
error: function (errorMsg) {
//请求失败之后进入该方法,errorMsg为失败后返回的错误信息
}
});

JS提交数据,通过window.location.href指定路径提交数据。
var deleteUser = function (deleteId) {
if (confirm(“确认删除编号是【”+deleteId+”】的成员吗?”)){
window.location.href=”DeleteUserServlet?deleteId=”+deleteId;

通过a标签提交数据,通过a标签的href属性提交数据,和js提交数据类似。
<a href=”DeleteUserServlet?id=’3’&gender=’男'”></a>

在后台中也可以互相访问相应的Servlet
request.setAttribute(“id”,”3″);
request.setAttribute(“gender”,”男”);
request.getRequestDispatcher(“updateUser.jsp”).forward(request,response);

然后在对应的Servlet中接受参数,进行相应的处理

String id = request.getAttribute(“id”);
String gender = request.getAttribute(“gender”);

原文链接:https://blog.csdn.net/s2152637/article/details/90947003

 

 

数据从前台传到后台的几种方式

https://blog.csdn.net/sinat_21026543/article/details/80944986