【java】JavaWeb填坑记录

1.SqlServer实现mysql的limit功能(分页查询时使用)

select top ${rows} * from tableName where id not in (select top ${start} id from tableName)

其中,rows是要查询的行数,start是开始的行数。

<select id="findWorkListByWorkName" parameterType="com.LandInfoSys.Model.LandPlan" resultMap="landPlanMap">
       SELECT top ${rows} * FROM HZTX_养护设施_道路_信息
       <where>
           DLLX=#{name} and
           id NOT IN (SELECT TOP ${start} id FROM HZTX_养护设施_道路_信息);
       </where>
    </select>

2.IE浏览器无法解析中文路径报400错误,谷歌可以兼容

当传输路径包含中文时IE浏览器无法解析,报400错误,需对传输的中文路径进行编码:
参考博客:IE浏览器js 中http请求,中文传参报400错误-解决方法
java中对中文进行编码如下:URLEncoder.encode()

url = append(url, key.toString(), URLEncoder.encode(((String[]) value)[0],"utf-8"));

其中(String[]) value)[0]是要向后端传送的中文字段

3.SSM框架mapper.xml文件中“#”与“$”的区别

参考博客:

java ssm框架 mapper文件里的#符号和$符号的区别

mybatis mapper.xml文件中$和#的使用区别

项目中注意#和$的使用:

<select id="findWorkListByWorkName" parameterType="com.LandInfoSys.Model.LandPlan" resultMap="landPlanMap">

       SELECT top ${rows} * FROM HZTX_养护设施_道路_信息
       <where>
           DLLX=#{name} and
           id NOT IN (SELECT TOP ${start} id FROM HZTX_养护设施_道路_信息);
       </where>
--        WHERE FeatureNum NOT IN (SELECT TOP ${start} FeatureNum FROM HZTX_养护设施_道路_信息);

    </select>

4.jsp表单提交

<form action="${path}/LandPlan/toConditionLandPlan" method="post" class="col-9 nav text-white">
                <div class="form-row align-items-center">
                    <div class="col-auto my-2">
                        <div class="custom-control custom-checkbox mr-sm-2">
                            <input type="checkbox" class="custom-control-input" id="customControlAutosizing1">
                            <label class="custom-control-label" for="customControlAutosizing1">条件查询</label>
                        </div>
                    </div>
                    <div class="col-auto my-2">
                        <div>
                            <select class="custom-select mr-sm-2" id="daoluxuanze" name="name">
                                <option  selected>---请选择---</option>
                                <option>乡村公路</option>
                                <option>市政道路</option>
                            </select>
                        </div>

                        <%--<button type="submit" class="btn inquire-btn-color">统计</button>--%>
                         <%--<input class="btn-theme" type="submit" value="提交"/>--%>
                        <%--</form>--%>
                    </div>
                    <div class="col-auto my-2">
                        <button type="submit" class="btn inquire-btn-color">查询</button>
                    </div>
                </div>
            </form>

对下拉框内的选项进行提交,比如将“乡村公路”或者“市政道路”提交到后端进行条件查询

5. Ajax获取后端数据进行前端页面的更新

后端Controller代码如下:

@RequestMapping(value = "/toAjaxFullLand")
    @ResponseBody
    public List<LandPlan> fullAjaxLand() {
        //前端使用ajax接收
        System.out.println("[Service: toAjaxFullLand Page]");
        List<LandPlan> list = landPlanService.landPlan();
        return list;
    }

注意这里 @ResponseBody 必须加上,否则默认返回jsp页面报未找到错误,加上之后返回JSON对象。

前端jsp代码,

<button id="showall" onclick="query()" type="button">全部展开</button>

点击该button时调用query()函数

<script type="text/javascript"  src="${path}/js/jquery/jquery.min.js"></script>
<script type="text/javascript">
    function query() {
        $.ajax({
            type:"get",
            url:"${path}/LandPlan/toAjaxFullLand",
            dataType:'json',
            success:function(data) {
                // var number=5;
                for(var i=0;i<data.length;i++){
                    $("table#mytableall tr:last").after(
                        "<tr>" +
                        "<th>" + data[i].featureNum + "</th>" +
                        "<td>" + data[i].dlmc + "</td>" +
                        "<td>" + data[i].dllx + "</td>" +
                        "<td>" + data[i].cxdlmtcd + "</td>" +
                        "</tr>");
                }
            }
        })
    }
</script>

这里要引入 <script type="text/javascript" src="${path}/js/jquery/jquery.min.js"></script>,否则无法使用ajax,然后对后端返回的数据进行遍历循环输出。
table格式如下:

<table id="mytableall">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">道路名称</th>
            <th scope="col">道路编码</th>
            <th scope="col">道路类型</th>
        </tr>
        </thead>
            <tr>

            </tr>
</table>

6.jsp中table的显示和隐藏

<table id="mytable" style="display: table">

<table id="mytableall"  style="display: none">

注意table隐藏使用none,显示使用table,否则会改变原始tabel的列宽

if(mytable.style.display == "table" && mytableall.style.display == "none"){
            mytable.style.display = "none";
            mytableall.style.display = "table";
        }

7.复选框check的选中、不选中设置以及判断是否选中

参考博客:
复选框check的选中、不选中设置以及判断是否选中

8.访问静态文件(查看pdf,本地mvc配置映射)

Spring-MVC文件里:

<mvc:resources mapping="/Desktop/**" location="file:C:/Users/Lenovo/Desktop/" />

JSP文件里:

<a id="word" href="${path}/Desktop/pdf/"></a>

9.js获取td值

<td id="StrName">${u.name}</td>
var strobj = document.getElementById("StrName");
var strname = strobj.innerText;
console.log("strname= " + strname);

参考博客:
js获取td的值

10.js修改、删除option的值

1)修改

<select id="selectname" class="custom-select mr-sm-2" name="name">
        <option>---请选择---</option>
        <option>乡村公路</option>
        <option>市政道路</option>
</select>
var myselect = document.getElementById("selectname");
// var index = myselect.selectedIndex;
// var str = myselect.options[index].value;
myselect.options[0].text = "111";
//myselect.options[0].text = strname;
console.log("myselect.options[0].text= " + myselect.options[0].text);

2)删除

for (var i = 1; i < myselect.options.length; i++){
       if (myselect.options[i].value == strname){
          myselect.options[i] = null;
	}
}

参考博客:
JS如何动态给select的option赋值?
JS动态改变select选择变更option的index值

11.js获取表单提交的内容

<form id="form1" action="${path}/LandPlan/toConditionLandPlan" method="post" class="col-9 nav text-white">
      <div class="form-row align-items-center">
           <div class="col-auto my-2">
                <div>
                   <select id="selectName" class="custom-select mr-sm-2" name="name">
                       <option>---请选择---</option>
                       <option>乡村公路</option>
                       <option>市政道路</option>
                   </select>
               </div>
           </div>
      <div class="col-auto my-2">
      <input class="btn inquire-btn-color" type="button" value="查询" onClick="selectNull()"/>
</form>

js

 function selectNull(){
 		//option为请选择时给出提示,其他选项时提交表单内容到后端
        var myselect = document.getElementById("selectName");
        // var length = myselect.options.length;
        if (myselect.value == myselect.options[0].value){
            alert("请选择");
        }else {
            document.getElementById("form1").submit();
        }
    }
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页