如何在SpringMVC中使用jquery将值从自动完成搜索发送到控制器_Jquery_Spring_Autocomplete

如何在SpringMVC中使用jquery将值从自动完成搜索发送到控制器

jquery spring autocomplete

如何在SpringMVC中使用jquery将值从自动完成搜索发送到控制器,jquery,spring,autocomplete,Jquery,Spring,Autocomplete,我有一个带有两个自动完成字段的搜索表，用于在字段中搜索用户。这张桌子和自动完成装置工作得很好。但我的问题是如何从搜索字段中获取值，并且只需一个按钮即可将其保存到数据库中？如何从搜索中获取值这是我的密码： autocomplete.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="java.util.*"%>

我有一个带有两个自动完成字段的搜索表，用于在字段中搜索用户。这张桌子和自动完成装置工作得很好。但我的问题是如何从搜索字段中获取值，并且只需一个按钮即可将其保存到数据库中？如何从搜索中获取值

这是我的密码：

autocomplete.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"    import="java.util.*"%>
    ......
  </head>


  <script type='text/javascript'>
$().ready(function() {
    $('#search_input').focus()
});// focus search area
  </script>
  <script type='text/javascript'>
$().ready(function() {
    $('#blocked').focus()
});// focus search area
  </script>

 <style type="text/css">
 .halfDiv {
padding: 1em;
width: 42%;
float: left;
   }
.rightDiv {
padding: 1em;
width: 7%;
float: right;
  }

  </style>
  </head>
  <body>
<div class="halfDiv">
 <div id='header'>
 <h1 class="font2">Blocker User</h1>
 <form action='javascript:void(0);'>
<h3> <input id='search_input' size="32" style="height:20px"   name='search_input' type='text' autocomplete="on" />
 </h3>
 </form>
</div>
<div style="clear:left; height:30px;"></div>
<c:forEach items="${imageList}" var="blocker_images">
<div id='content'>
<div class='volcano search_item'>
<h4 class='search_text'>
<div class=fontstyle >
  ${blocker_images.user.userid }                            
 ${blocker_images.user.firstname } 
 ${images.user.lastname}
 ${blocker_images.user.email }
</div>
</h4>
<div class="infor_div">
<img alt="pictures" src="<c:url value='${request.contextPath}/image/${blocker_images.imageid}'/>" />    </div>
<div class="picture_div">
<p>${blocker_images.user.address.street }<br/>${blocker_images.user.address.zipcode }    ${blocker_images.user.address.city }</p> </div>
</div>
</div>
</c:forEach>
</div>
<div class="halfDiv">
<div id='header'>
<h1 class="font2">Blocked User</h1>
<form action='javascript:void(0);'>
<h3>
<input id='blocked' size="32" style="height:20px" name='blocked' type='text' autocomplete="off" />
</h3>
</form>
</div>
<div style="clear:left; height:30px;"></div>
<c:forEach items="${imageList}" var="blocked_images">
<div id='content'>
<div class='volcano search_item_blocked'>
<h4 class='search_text_blocked'>
<div class="fontstyle">
${blocked_images.user.userid }
${blocked_images.user.firstname }
${blocked_images.user.lastname} ${blocked_images.user.email }</div>
</h4>
<div class="picture_div">
<img alt="pictures" src="<c:url value='${request.contextPath}/image/${blocked_images.imageid}'/>"/>
</div>
<div class="infor_div">                                   
${blocked_images.user.address.street }
 ${blocked_images.user.address.city } ${blocked_images.user.address.zipcode }</p>
</div></div>
</div>
</c:forEach>
</div>
<form:form action="" method="post" modelAttribute="user">
        <div  class="rightDiv"> <button class="button blue" type="submit">Save</button></div>
        </form:form>
    </div>
 </div>
 </body> 
 </html>

这是我的控制器

 @Controller
 @RequestMapping
 public class BlockeeController
 {
@Autowired
private static BlockeeService blockeeService = new BlockeeService();
@Autowired
private static UserService us = new UserService();
@Autowired
private static DisplayImageService imgService = new DisplayImageService();

    @RequestMapping(value = "/autocomplete", method = RequestMethod.GET)
public String autocomplete(@ModelAttribute("blocker") User  blocker,     @ModelAttribute("blocked") User blocked, ModelMap model, HttpServletRequest request)
{
    System.out.println("blocker "+blocker);
    System.out.println("blocked "+blocked);

    model.addAttribute("currentUser", getCurrentUsername());

    Collection<User> users = us.findAllUsers();
    model.addAttribute("allUsers", users);

    Collection<UploadImage> imageList = imgService.showAllPictures();
    model.addAttribute("imageList", imageList);
            model.addAttribute("blocker", blocker);
    model.addAttribute("blocked", blocked);

    return "autocomplete";

}

谢谢你的帮助

您在JSP页面中没有提到任何

标记。Save按钮类型被称为

Submit

，因此添加一个表单并使用

@modeldattribute

注释获取控制器中的所有表单属性，前提是您编写了一个包含JSP属性的POJO

另一个选项是单击Save按钮进行AJAX调用。准备一个Javascript对象，为其分配变量和值，并将其字符串化。Stringify操作将其转换为JSON，将此JSON传递给控制器，控制器将其转换为表示Javascript对象的

Java对象。控制器将使用@RequestBody
注释接受此对象。
您可以发送表示要在控制器中检索的用户的JSON
例如，如果您发送类似以下内容的JSON：
$.ajax({url:'autocomplete',
  type:'POST',
  dataType:'json',
  contentType:'application/json',
  data:JSON.stringify([
                 {blockerImage : someValue, ... }
                 ,{blockerImage: otherValue, ...}])
});

（我假设用户POJO有一些值）
这将向您的控制器发送一个拦截器对象列表，您可以在控制器bi中检索它们
public String blockeeImages(@RequestBody List<User> blockerParams, Model model){

}

public String blockeeImages（@RequestBody List blockerParams，Model）{
}

让用户对象的POJO发送JSON将创建用户对象，然后您可以根据需要使用它们
并将jackson mapper添加到您的项目中，以便更轻松地使用JSON reprentations。您好，请检查我的代码，我更新了它们。但问题是我无法获得@modeldattribute的用户，因为他们是空的。问题是我如何在搜索后得到它们。我不能接受任何Ajax。请我你有更多的帮助将是伟大的完整。表单作为一个职位提交，但控制器期望得到一个得到，而且表单的行动是空的，所以控制器将永远不会被击中@RequestParameter用于获取参数，但这是一个POST。请看本教程。第一个控制器是GET，用于获取带有图像的表，第二个控制器是POST，用于发布表单。所以这不是问题所在。我使用@modeldattribute。
$.ajax({url:'autocomplete',
  type:'POST',
  dataType:'json',
  contentType:'application/json',
  data:JSON.stringify([
                 {blockerImage : someValue, ... }
                 ,{blockerImage: otherValue, ...}])
});

public String blockeeImages(@RequestBody List<User> blockerParams, Model model){

}