Question

我用表格查了一个jsp页面。我想在使用Jquery单击按钮后刷新表。但结果我同时看到两个观点。如何避免这个问题？

我的控制器

@Controller
@RequestMapping("/")
public class HelloController {

    private final Logger log = LoggerFactory.getLogger(getClass());

    @Autowired
    private UserServiceDao userServiceDao;

    @RequestMapping(method = RequestMethod.GET)
    public String printWelcome(ModelMap model) {
       model.addAttribute("Message","first");
       model.addAttribute("list",userServiceDao.findAll());
       log.trace("NUMBER:::::::::::::::::::::"+userServiceDao.findAll().size());
        return "main";
    }

    @RequestMapping("/table")
    public ModelAndView renderTable(HttpServletRequest request) {

        String name = request.getParameter("nameSearch");
        log.trace("1: "+name);
        List<User> people = userServiceDao.find(name);
        log.trace("2: "+people.size());
        return new ModelAndView("main", "list", people);
    }
}

使用Jquery脚本的MY视图

<body>

<div class="sear">
<input class=" int datasearch" type="search" value="an" id="dataSearch">
<input class="int search" type="button" value="Search" id="search">
<input class="int create"  type="button" id="err" value="Create user">
</div>
<h1>List of users: </h1>

<div class="table" >
       <c:forEach var="item" items="${list}">
    <div class="row"  >

        <div  id="tabl" class="cell" style="width:300px;"><c:out value="${item.name}"/>></div>
        <div class="cell" style="width:100px;" ><input class="delete" type="button" value="Delete user"></div>
        <div class="cell"><input class="edit" type="button" value="Edit user"></div>

    </div>
       </c:forEach>
</div>

<script type="text/javascript">

    $('#err').click(function(){
        window.location.href='/registration';

    })
    $('#search').click(function(){

        $(function() {
            var myTableContainer = $("#tabl");

            var renderTable = function(container) {
                var data = $('#dataSearch').val();
                var postReqData = {}; // Create an empty object
                postReqData['nameSearch'] = data;

                $.get("/table",postReqData, function(data) {

                    container.empty().html(data);
                })
            };

            /* This is called on document ready */
            renderTable(myTableContainer);

            /* Use the same renderTable function when the refresh button is clicked */
            $("#search").click(function() {
                renderTable(myTableContainer);
            });
        })
    })

Answer 1

好的，评论可能有点太长了。

您的主要问题是@RequestMapping(method = RequestMethod.GET)和@RequestMapping("/table")都呈现相同的视图。

即：包含所有搜索输入的视图，<c:forEach>表和javascript。

因此，当您执行搜索并返回ajax调用时，您将div#tabl的内容替换为所有搜索输入<c:forEach>和javascript。

你最终会以错误的方式嵌套两件东西。

我的建议是做一个RequestMapping渲染基本的jsp，另一个只渲染搜索结果（甚至返回json并在javascript中将其渲染为html）。

JQuery在Spring MVC中更新<c：foreach> </c：foreach>

1 个答案: