前端ajax获取输入框的值并传给指定后台Controller方法，再获取返回值并调用

还是用实际例子来讲比较容易理解，当然急着解决问题的话就直接去看我前端和后端代码
最近在公司做的一个项目，有个功能是在输入框输入养殖场名称，点击查询后地图定位到该养殖场。

前端页面是：

Controller是：

第一步：
在gis.html中用ajax获取这个输入框的值，也就是farmName，在点击搜索按钮后，ajax将值传给LivestockController。
给输入框定义id：suggestId，之后会根据这个id来获取输入框的值。
给按钮定义id：search-btn，动作监听。

请输入:<input type="text" id="suggestId" size="20" value="请输入搜索内容" style="width:150px;" />
      <button class="layui-btn layui-btn-xs layui-btn-normal" id="search-btn" lay-filter="sumbit" >搜索</button>

第二步：

监听事件：
searchBtn.addEventListener("click", function(data) {//点击搜索
            var data = document.getElementById("suggestId").value;//字段名和值
            // layer.alert(data)
            $.ajax({
                url: "/livestock/getFarmInfoByName",
                type: "post",
                contentType: "application/json",
                dataType:"json",
                async:false,
                data: JSON.stringify({ "farmName": data}),
                success: function (result) {
                     if (result.farmLongitude != null && result.farmLatitude != null) {
                        // alert(result.farmLatitude)
                        var new_point = new BMap.Point(result.farmLongitude,result.farmLatitude);
                        map.centerAndZoom(new_point, 15);
                        var marker = new BMap.Marker(new_point);  // 创建标注
                        map.addOverlay(marker);               // 将标注添加到地图中
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                     }
                     else layer.alert("此养殖场不存在")
                }, error: function (err) {
                    layer.close(index);
                    layer.alert("此养殖场不存在")
                }
            })
        });

解释：
searchBtn其实就对应的id是search-btn的按钮。我在前面定义了一下：

var searchBtn = G('search-btn');

这个路径

url: "/livestock/getFarmInfoByName"

livestock是LivestockController这个类

getFarmInfoByName是类中的getFarmInfoByName方法
第三步：
Controller获取值并返回数据

    @PostMapping("getFarmInfoByName")
    @RequestMapping(value="/getFarmInfoByName",method = RequestMethod.POST)
    @ResponseBody
    public SysFarm getFarmInfoByName(@RequestBody String str) {
        JSONObject jsonObject = JSON.parseObject(str);
        String farmName=jsonObject.getString("farmName");
        SysFarm sysFarm = sysFarmService.findSysFarmByName(farmName);
        return sysFarm;
    }

在方法里，我通过前端传过来的养殖场名称，通过查询功能返回了一个Sysfarm实体类

    @PostMapping("getFarmInfoByName")
    @RequestMapping(value="/getFarmInfoByName",method = RequestMethod.POST)

这两个都是定位此方法的，我都丢上去了
千万别忘了参数前面要加@RequestBody，不然就算ajax传成功了，方法这边的值也是null
第四步：
其实也不能说是第四步，严格来说更像是第四流程。。
在Controller方法return了我想要获取的养殖场实体类后，接下来再回到前端ajax

这部分是成功后的操作，"result"便是Controller返回的那个数据。
因为需要定位，我采取的是通过经纬度来定位养殖场，
result.farmLongitude和result.farmLatitude
然后就是调用百度地图的API，拿过来直接用就行。
最后那行代码是实现一跳一跳的定位点。可以不用。
结果：

后续：
不好意思，忘记说了，此方法需要在pom.xml文件加上这段：

<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.7</version>
</dependency>

转换json用的，加上之后刷新一下maven