jquery - 使用 AJAX、Spring MVC、MySQL 更新表

标签 jquery mysql ajax spring spring-mvc

如何在 foreach 循环中使用 AJAX 更新我的表而不刷新页面! 请帮忙! 这是我的jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<%@page language="java" session="true" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Cообщения | Violence and Hate</title>
<link href="<c:url value="/resources/bootstrap/bootstrap.css"/>"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/bootstrap/bootswatch.less.css"/>"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/bootstrap/variables.less.css"/>"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/CSS/styles.css"/>" rel="stylesheet"
	type="text/css">
<script src="<c:url value="/resources/Jquery/jquery-2.1.4.min.js"/>"
	type="text/javascript"></script>
</head>
<body>

	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Violence and Hate</a>
			</div>

			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">

					<li><a href="/app/user">Профиль</a></li>
					<li><a href="/app/user/messages">Сообщения</a></li>
					<li><a href="/app/user/search">Поиск оппонента</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-expanded="false">Информация<span
							class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="/app/user/rules">Правила</a></li>
							<li><a href="/app/user/contacts">Наши контакты</a></li>
							<li class="divider"></li>
							<li><a href="/app/user/feedback">Написать администрации</a></li>
						</ul></li>
					<security:authorize ifAnyGranted="ROLE_ADMIN">
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown" role="button" aria-expanded="false">Администрирование<span
								class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="/app/admin">Админка/Список пользователей</a></li>
								<li><a href="/app/admin/feedbacklist">Отзывы/Вопросы/Предложения</a></li>

							</ul></li>
					</security:authorize>
				</ul>

				<c:url var="logoutUrl" value="/j_spring_security_logout" />
				<form class="navbar-form navbar-right" action="${logoutUrl}"
					method="post">
					<button class="btn btn-default" type="submit">Выйти</button>
					<input type="hidden" name="${_csrf.parameterName}"
						value="${_csrf.token}" />
				</form>
			</div>
		</div>
	</nav>
	<img class="img-responsive center-block"  src="<c:url value="/resources/logo/logo.png"/>" />
	<h2 class="text-center">Личные сообщения</h2>
<h5 class="text-center">Чтобы начать общение - выберите оппонента в поиске и отправьте ему сообщение</h5>

   <!-- tabs left -->
   <c:if test="${!empty listDialog}">
      <div class="tabbable tabs-left">

        <ul class="nav nav-tabs">
        <li class="active"><a href="#start" data-toggle="tab">Инфо</a></li>
      <c:forEach items="${listDialog}" var="dialog"> 
          <li><a href="#a" data-toggle="tab">${dialog.iddialog}</a></li>
          </c:forEach>      
        </ul>
        
        <div class="tab-content">
        <!-- <div class="tab-pane active" id="start">
        Напишите сообщение через поиск!
        </div>
         <div class="tab-pane"  id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
         Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
        </div>-->
      </div>
      <!-- /tabs -->
    </div>
</c:if>
</body>
<script src="<c:url value="/resources/Jquery/jquery-2.1.4.min.js"/>"
	type="text/javascript"></script>
<script src="<c:url value="/resources/bootstrap/bootstrap.js"/>"
	type="text/javascript"></script>
</html>

这是我的 Controller 方法，我从数据库获取对话框列表

@RequestMapping(value = "/user/messages", method = RequestMethod.GET)
public String messagesPage(Model model, Principal principal) {
    model.addAttribute("dialog", new Dialog());
    model.addAttribute("listDialog", dialogService.listDialog(principal.getName()));
    return "messages";

}

这是我的 DAO 方法，我使用 SQL 查询从数据库获取信息

@SuppressWarnings("unchecked")
@Override
public List<Dialog> listDialog(String username) {
    String query = "select dialog.iddialog, dialog.username, dialog.reciever from dialog where dialog.username LIKE '%s' OR dialog.reciever LIKE '%s'";
    Session session = null;
    session = sessionFactory.openSession();
    List<Dialog> dialogList = session.createSQLQuery(String.format(query, username, username)).addEntity(Dialog.class).list();
    session.close();
    session = null;
    return dialogList;
}

这是我的 SQL 代码，其中包含用户表和对话框表

    CREATE TABLE `users` ( 
`username` varchar(45) CHARACTER SET utf8 NOT NULL, 
`enabled` bit(1) NOT NULL,
`password` varchar(60) CHARACTER SET utf8 NOT NULL, 
`name` varchar(30) CHARACTER SET utf8 NOT NULL,
`surname` varchar(30) CHARACTER SET utf8 NOT NULL,
`email` varchar(50) CHARACTER SET utf8 NOT NULL,
`gender` varchar(30) CHARACTER SET utf8 NOT NULL,
`age` varchar(2) NOT NULL,
`weight` varchar(2) NOT NULL,
`height` varchar(3) NOT NULL,
`sport` varchar(50) CHARACTER SET utf8 NOT NUlL,
`place` varchar(400) CHARACTER SET utf8 NOT NULL,
`photoa` varchar(100) NOT NULL,
`photob` varchar(100) NOT NULL,
PRIMARY KEY (`username`) 
) ENGINE=InnoDB DEFAULT CHARSET=UTF8; 

CREATE TABLE `user_roles` ( 
`user_role_id` int(11) NOT NULL auto_increment, 
`role` varchar(45) NOT NULL, 
`username` varchar(45) NOT NULL, 
PRIMARY KEY (`user_role_id`), 
KEY `FK_9ry105icat2dux14oyixybw9l` (`username`), 
CONSTRAINT `FK_9ry105icat2dux14oyixybw9l` FOREIGN KEY (`username`) REFERENCES `users` (`username`) 
) ENGINE=InnoDB DEFAULT CHARSET=UTF8; 

create table dialog
(
`iddialog` int NOT NULL auto_increment,
`reciever` varchar(50) CHARACTER SET utf8 NOT NULL,
`username`varchar(45) CHARACTER SET utf8 NOT NULL,
PRIMARY KEY(`iddialog`),
foreign key (`username`) references users(`username`)
)ENGINE=InnoDB DEFAULT CHARSET=UTF8;

最佳答案

java方法很简单:

只需返回您想要的数据结构并在声明中添加@ResponseBody(您需要在类路径中添加jackson):

@RequestMapping(value = "/user/messagesajax", method = RequestMethod.GET)
public @ResponseBody List<Dialog> messagesPageAjax(Model model, Principal principal) {
    return dialogService.listDialog(principal.getName());
}

然后你必须编写一个 js 函数并将其绑定(bind)到 DOM 事件(文档加载、按钮单击等)，该函数将如下所示(Jquery 1):

function ajaxFillTable() {

    $.ajax({
        dataType : "json",
        url : '/user/messagesajax',
        headers : {
            'Accept' : 'application/json',
            'Content-Type' : 'application/json'
        },
        type : 'GET',
        success : function(data) {
            //TODO FILL your table 
            $.each(data,function(key, val) {
                    //TODO
            });

        }
    });
}

在 success 方法中，您将在“data”变量中获取对象，您可以迭代列表、获取属性并将 html 附加到 DOM

关于jquery - 使用 AJAX、Spring MVC、MySQL 更新表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34486211/

上一篇：php - 如何使用 PHP 的 PDO 强制创建新的数据库连接来连接 MySQL

下一篇：php - 现在在 Ubuntu(Linux) 上设置时显示 MsSql/odbc 驱动程序

相关文章：

javascript - 如何解析来自 Bigquery 结果的 json 响应？

javascript - jquery:工具提示在空格后不显示数据

mysql - 查找字符串中最后一个单词的 SQL 语句

c# - 有没有办法从静态方法访问缓存或 session ？

javascript - 如何在 ajax 调用中保护我的登录凭据？

jquery - 使数据角色 ="content"内的 div 响应

jQuery UI : Only allow sortable within its own parent level, 且不高于或低于

jquery - 动态加载Google map AJAX教程

mysql 停止运行 OPTIMIZE 命令？

java - 将数据库表从服务器传输到客户端

©2024 IT工具网  联系我们