《前后端基础》前后端交互、ajax基础、提交、获取、跳转操作等

 前述：终于抽出时间，整理了一些编程中所需基础知识。

-------------内容提交：----------------
controller：

 @RequestMapping("/xxxxInsert.do")
    @ResponseBody
    public Map<String, Object> xxxxxInsert(HttpServletRequest request, xxxxEntity xxxxEntity) {
        Map<String, Object> map = new HashMap<>();
        String input_1 = request.getParameter("input_1");
     
        xxxxEntity.setContent(t);
        String hInsert = xxxxService.xxxInsertinfo(xxxxEntity);
        if (hInsert != null) {
            map.put("t", "true");
            return map;
        } else {
            map.put("f", "false");
            return map;
        }
    }

web：

<input id="input_id" type="text" placeholder="内容">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>  
<script type="text/javascript">
    function context_submit() {
        var input_1 = document.getElementById("input_id").value;
        if ( input_1 != "" ) {
            $.ajax({
                url: '${pageContext.request.contextPath}/xxx/xxx/xxxxInsert.do',
                data: {
                    "input_1": input_1
                    ......
                    ......
                },
                type: 'POST',
                dataType: 'json',
                async: true,
                success: function (data) {
                    if (data.t == "true") {
                        alert("xxxxxx成功。");
                    }else {
                        alert("xxxxx失败！请重新xxxxx。");
                    }
                },
                error: function () {
                    alert("出现异常!请重新提交。");
                }
            });
            return true;
        }
        
        if (input_1 == "") {
            alert("请输入xxxxxx！");
            return false;
        }
        
        ......
        
        return true;
    }
</script>

-----------------根据不同标题获取主内容：------------------
controller:
 

 @RequestMapping("xxxxSelect.do")
    @ResponseBody
    public Map<String, Object> xxxxSelect(HttpServletRequest request, Map map) {
        Map<String, Object> mapin = new HashMap<>();
        String title = request.getParameter("title");
        map.put("categories", title);
        List<Map> selectinfo = xxxxService.xxxxSelectSerIn(map);
        if (selectinfo != null) {
            mapin.put("t", selectinfo);
            return mapin;
        } else {
            mapin.put("f", "false");
            return mapin;
        }
    }

web:

 <a class="titles">标题1</a>
 <a class="titles">标题2</a>
 <div id="maintext"></div>
<script type="text/javascript">
    $(function () {
        $('.titles').click(function () {
            var t = this.innerHTML;
            $.ajax({
                url: '${pageContext.request.contextPath}/xxxx/xxx/xxxxSelect.do',
                data: {
                    "title": t
                },
                type: 'POST',
                dataType: 'json',
                async: true,
                success: function (data) {
                    var md = data.maindata;
                    var html = '<div class="xxxx">';
                    for (var i = 0; i < md.length; i++) {
                        html += '<div>' +
                            '<div class="xxxxx">' + md[i].context + '</div>' +
                            '</div>';
                    }
                    html += '</div>';
                    document.getElementById('maintext').innerHTML = html;
                },
                error: function (data) {
                    if (data.f == "false") {
                        alert("查询异常。请重新查询。");
                    }
                }
            });
            return true;
        });
    });
</script>

-------------------页面跳转:page1跳转到page2-----------------
--------page1---------
controller:

 @RequestMapping("/maint.do")
    public String maint() {
        return "/xxxx.jsp";
    }

web:

<div onclick="topage(id=' + data[i].iD + ')">xxxxxx</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/base64.js"></script>
<script type="text/javascript">
 function topage(id) {
        var b = new Base64();
        var mkid = b.encode(id.toString());
        location.href='${pageContext.request.contextPath}/xxx/xxxx/maint.do?cn='+mkid;
    }
</script>

---------page2--------
web:

<script type="text/javascript">
  function getRequest() {
        var re = window.location.search.substring(1);
        return re.slice(3);
    }
    var b = new Base64();
    var maintext = b.decode(getRequest());//得到page1中信息
.....
...//获取信息：

</script>