这次扩展了一个功能,大概就是前台输入链接,后台根据链接下载知乎上的图片。 根据流程介绍: 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设置上