SSM框架-爬虫功能交互实现

Ajax读取前台数据，后台下载

这次扩展了一个功能，大概就是前台输入链接，后台根据链接下载知乎上的图片。
根据流程介绍：
1.首先这是登录之后的界面

2.然后就是在输入框中填入目标链接，这里通过Ajax完成前后端数据交互。
3.这两行的html代码如下

 <input class="input-medium search-query" name="input_url" id="input_url" type="text" />
 <button id="download_url" type="button" class="btn" onclick="printMsg()">开始抓取</button>

然后Ajax获取输入的url数据，并且进入到相应的controller，如果输入的链接为空，或者不符合规则，则返回错误信息，如果通过则将url赋值给下载controller的静态类，并且返回成功信息
Ajax代码如下

<script type="text/javascript">
    function printMsg() {
        var url=document.getElementById("input_url").value
        alert("ajax启动，目标链接："+url)
        $.ajax({
            ansyc: false,
            type: "POST",
            url: "/MySSM/controller/login",
            data:{"input_url":url},
            dataType:"json",
            success: function (data) {
                alert("ajax成功"+data.msg);
                window.location.href="/MySSM/controller/linkTOpic"
            },
            error: function (data) {
                alert("ajax失败"+data.msg);
            }
        })
    }
</script>

这里有些坑，
1).首先就是ansyc(是否异步发送)一定得是false，也就是controller不返回数据就不往下进行。
2).就是url，必须设置正确，这里最好设置成和当前页面的url类似的，例如这里是 http://localhost:8080/MySSM/controller/welcome,然后url设置成 http://localhost:8080/MySSM/controller/login
3).最后就是data了,Ajax向controller发送数据有三种方式
key/value类型 JSON 序列化表单
data:“name=”+name data:{“name”:name} data:$("#form").serialize()
这里我选择json
然后就是如果Ajax里如果有错误，是不会有任何提示的，包括F12里也看不到交互信 息，所以务必设置好，比如data里的数据没有设置好，命名赋值错误之类的.

4.controller代码如下

@Controller
@RequestMapping(value = "/MySSM/controller",method = RequestMethod.POST)
public class loginCheck {
    public static String loginControllerSavedUrlString;
    @ResponseBody
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Map<String,String> login(@RequestParam(value = "input_url",required = false) String input_url){
        System.out.println("Ajax执行到这了,获取到的数据是这个---"+input_url);
        Map<String,String> ret=new HashMap<>();
        if(StringUtils.isNullOrEmpty(input_url)){
            ret.put("msg","链接不能为空"+loginControllerSavedUrlString);
        }
        else {
            //这里定义一个数据存储链接供下载时使用，Ajax还不太熟悉，暂时使用这个办法
            loginControllerSavedUrlString = input_url;
            ret.put("msg", "一切正常，跳转的事等会" + loginControllerSavedUrlString);
        }
        return ret;
    }
}

这里通过 @ResponseBody注解可以把map返回值转化成json数据,不过这里需要加一个Bean配置

    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="messageConverters">
            <list>
                <bean
                        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
            </list>
        </property>
    </bean>

所以总的来说就是Ajax有点坑，主要是url链接设置以及data设置上