Java JQuery更新a<；c:forEach>；春季MVC_Java_Jquery_Spring_Jsp_Spring Mvc

Java JQuery更新a<；c:forEach>；春季MVC

java jquery spring jsp spring-mvc

Java JQuery更新a<；c:forEach>；春季MVC,java,jquery,spring,jsp,spring-mvc,Java,Jquery,Spring,Jsp,Spring Mvc,我用表创建了一个jsp页面。我想在使用Jquery单击按钮后刷新表。但结果我同时看到了两种观点。如何避免这个问题我的控制器 @Controller @RequestMapping("/") public class HelloController { private final Logger log = LoggerFactory.getLogger(getClass()); @Autowired private UserServiceDao userServic

我用表创建了一个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);
    }
}

@控制器
@请求映射（“/”）
公共类Hello控制器{
私有最终记录器log=LoggerFactory.getLogger（getClass（））；
@自动连线
私有UserServiceDao UserServiceDao；
@RequestMapping（method=RequestMethod.GET）
公共字符串printWelcome（ModelMap模型）{
model.addAttribute（“消息”、“第一”）；
model.addAttribute（“list”，userServiceDao.findAll（））；
log.trace（“编号：：：：：：：：”+userServiceDao.findAll（）.size（））；
返回“main”；
}
@请求映射（“/table”）
公共模型和视图可渲染（HttpServletRequest）{
字符串名称=request.getParameter（“名称搜索”）；
log.trace（“1:+名称）；
List people=userServiceDao.find（名称）；
log.trace（“2:+people.size（））；
返回新模型和视图（“主”、“列表”、人员）；
}
}

使用Jquery脚本查看我的视图

<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);
            });
        })
    })


用户名单：
>
$（'#err'）。单击（函数（）{
window.location.href='/registration'；
})
$（“#搜索”）。单击（函数（）{
$（函数（）{
var myTableContainer=$（“#tabl”）；
var renderTable=函数（容器）{
var data=$（'#dataSearch'）.val（）；
var postReqData={}；//创建一个空对象
postReqData['nameSearch']=数据；
$.get（“/table”、postReqData、函数（数据）{
container.empty（）.html（数据）；
})
};
/*这是在文档准备就绪时调用的*/
可渲染（myTableContainer）；
/*单击“刷新”按钮时使用相同的可渲染功能*/
$（“#搜索”）。单击（函数（）{
可渲染（myTableContainer）；
});
})
})

好的，对于注释来说，这可能有点太长了

您的主要问题是

@RequestMapping（method=RequestMethod.GET）

和

@RequestMapping（“/table”）

呈现相同的视图

即：包含所有搜索输入的视图、表和javascript

因此，当您执行搜索和ajax调用返回时，您将使用所有这些搜索输入、

和javascript替换

div#tabl

的内容

你最终会得到两件东西以错误的方式嵌套在一起

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

您可能想使用

var myTableContainer=$（“.table”）有什么区别？结果是一样的。不，不会的。您将替换表div的内容（有效地替换表），而不是将更多内容放入其中。此外，您确实不希望为两个请求映射返回相同的视图，因为您使用ajax请求页面的一个片段，而不是整个页面。您错了。因为我也抄袭。你知道为什么吗？