多表联查,多条件查询,ajax返回值乱码,前台循环展示json数据

多表联查,多条件查询

@Data
public class hangyunxingxi {

    private int hangyunid;

    private int rid;

    private int starid;

    private int endid;

    private int dateid;

    private String hangcheng;

    private float price;

    private String rname;

    private String starname;

    private String endname;

    private String date;

}
<?xml version="1.0" encoding="UTF-8" ?>
        <!DOCTYPE mapper
                PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
                "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qianfeng.mapper.zlxhangyunxingxiMapper">

    <select id="queryHangyunxingxi" resultType="com.qianfeng.pojo.hangyunxingxi">
        SELECT       hangyunid,hy.rid,r.rname,hy.starid,s.starname,e.endid,e.endname,hy.dateid,sd.date,hangche  ng,price FROM hangyunxingxi hy
        LEFT JOIN route r ON hy.rid=r.rid
        LEFT JOIN star s ON hy.starid=s.starid
        LEFT JOIN `end` e ON hy.endid=e.endid
        LEFT JOIN stardate sd ON hy.dateid=sd.dateid
    </select>

    <select id="reachHangyunxingxi" resultType="com.qianfeng.pojo.hangyunxingxi">
        SELECT hangyunid,hy.rid,r.rname,hy.starid,s.starname,e.endid,e.endname,hy.dateid,sd.date,hangcheng,price FROM hangyunxingxi hy
        LEFT JOIN route r ON hy.rid=r.rid
        LEFT JOIN star s ON hy.starid=s.starid
        LEFT JOIN `end` e ON hy.endid=e.endid
        LEFT JOIN stardate sd ON hy.dateid=sd.dateid
        <where>
            <if test="rname != null"> <!-- WHERE,会自动忽略前后缀(如:and | or) -->
                rname=${rname}
            </if>

            <if test="starname != null">
                AND s.starname=${starname}
            </if>

            <if test="endname != null">
                AND e.endname=${endname}
            </if>

            <if test="date != null">
                AND sd.date=${date}
            </if>
        </where>
    </select>

</mapper>

前台页面展示,解决ajax返回值乱码

使用ajax请求返回前台的时候会出现乱码的情况,需要在@RequestMapping中添加produces = "application/json; charset=utf-8"

 //查询并展示所有航运信息
    @RequestMapping(value = "hangyunlist",method = RequestMethod.POST , produces = "application/json; charset=utf-8")
    @ResponseBody
    public String hangyunxingxilist(HttpServletResponse response){
        response.setContentType("text/html;charset=utf-8");
        List<hangyunxingxi> hangyunxingxis = zlxService.queryHangyunxingxi();

        Gson gson2=new Gson();
        String str=gson2.toJson(hangyunxingxis);

        return str;
    }

    //更具条件查询航运信息
    @RequestMapping("reach")
    public String reachhangyun(String rname,String starname,String endname,String date){  // hy 参数表示从前台传回的所有查询条件

        List<hangyunxingxi> hangyunxingxis = zlxService.reachHangyunxingxi(rname,starname,endname,date);

        System.out.println("查询信息" + hangyunxingxis);

        return "";
    }
<%--    航运信息表格--%>
    <script>
        $(function(){
            $.ajax({
                url: "hangyunlist",
                type:"post",
                dataType: "json",
                data: {},//传送请求数据
                success: function(data) {//登录成功后返回的数据

                    var list = data;
                    var $tr=[];
                    var $td;
                    for(var i=0; i<list.length; i++) {
                        $td = $('<tr></tr>');
                        $('<td class="td1">'+list[i].rname+'</td>').appendTo($td);
                        $('<td class="td2">'+list[i].starname+'</td>').appendTo($td);
                        $('<td class="td3">'+list[i].endname+'</td>').appendTo($td);
                        $('<td class="td4">'+list[i].date+'</td>').appendTo($td);
                        $('<td class="td5">'+list[i].hangcheng+'</td>').appendTo($td);
                        $('<td class="td6">'+list[i].price+'</td>').appendTo($td);
                        $('<td class="td7"><a href="">快速下单</a></td>').appendTo($td);

                        $tr.push($td);
                    }
                    for(var j=0;j<$tr.length;j++) {
                        $($tr[j]).appendTo($('#hylist'));
                    }
                }
            })

        })


    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。