Beispiel für die Integration von Spring MVC und jQuery

Dieses Tutorial zeigt, wie man integriert Spring MVC und jQuery für die Entwicklung einer Webanwendung. In diesem Beispiel wird das jQuery-Frontend zum Abrufen der Daten vom Spring MVC-Controller verwendet. Außerdem werden die Daten im Textfeld für die Funktion zur automatischen Vervollständigung verwendet. Wenn Sie Fragen haben, schreiben Sie diese bitte in den Kommentarbereich.

lesen Sie auch:

  • Einführung in Spring MVC
  • Spring MVC + AngularJS-Integration
  • Einführung in das Spring MVC Test Framework
  • Spring- und JSF-Integration

1. Spring MVC-Controller

CompanyController.java

Dies ist die Implementierung des Spring MVC-Controllers, auf den jQuery zugreift.

package javabeat.net.spring.mvc;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javabeat.net.spring.dao.DataStore;
import javabeat.net.spring.model.Company;

@Controller
public class CompanyController {
	private static DataStore dataStore = new DataStore();

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public ModelAndView index() {

        Company userForm = new Company();

        return new ModelAndView("company", "companyForm", userForm);
    }

    @RequestMapping(value = "/get_ceos_list",
                    method = RequestMethod.GET,
                    headers="Accept=*/*")
    public @ResponseBody List<String> getCountryList(@RequestParam("term") String query) {
        List<String> countryList = dataStore.getCeosList(query);

        return countryList;
    }

    @RequestMapping(value = "/get_co_list",
                    method = RequestMethod.GET,
                    headers="Accept=*/*")
    public @ResponseBody List<String> getCoList(@RequestParam("term") String query) {
        List<String> countryList = dataStore.getCoList(query);

        return countryList;
    }
}

Firma.java

package javabeat.net.spring.model;

public class Company {
	private String ceos;
	private String companies;
	public String getCeos() {
		return ceos;
	}
	public void setCeos(String ceos) {
		this.ceos = ceos;
	}
	public String getCompanies() {
		return companies;
	}
	public void setCompanies(String companies) {
		this.companies = companies;
	}
}

DataStore.java

Hier speichern wir einige Beispieldaten, die vom Controller verwendet werden.

package javabeat.net.spring.dao;

import java.util.ArrayList;
import java.util.List;
import java.util.StringTokenizer;

public class DataStore {
	private List<String> ceos;
    private List<String> companies;

    public DataStore() {

        String data = "Steve Jobs, Bill Gates, Dell, Larry Ellision, Lary Page, Sergy Brin";

        ceos = new ArrayList<String>();
        StringTokenizer token = new StringTokenizer(data, ",");

        while(token.hasMoreTokens()) {
            ceos.add(token.nextToken().trim());
        }

        String strTags = "Apple, Microsoft, Oracle, Google, Facebook, Twitter";
        companies = new ArrayList<String>();
        StringTokenizer token2 = new StringTokenizer(strTags, ",");

        while(token2.hasMoreTokens()) {
            companies.add(token2.nextToken().trim());
        }

    }

    public List<String> getCeosList(String query) {

        String country = null;
        query = query.toLowerCase();
        List<String> matched = new ArrayList<String>();
        for(int i=0; i < ceos.size(); i++) {
            country = ceos.get(i).toLowerCase();
            if(country.startsWith(query)) {
                matched.add(ceos.get(i));
            }
        }
        return matched;
    }

    public List<String> getCoList(String query) {
        String country = null;
        query = query.toLowerCase();
        List<String> matched = new ArrayList<String>();
        for(int i=0; i < companies.size(); i++) {
            country = companies.get(i).toLowerCase();
            if(country.startsWith(query)) {
                matched.add(companies.get(i));
            }
        }
        return matched;
    }
}

2. Ansichten mit JQuery

unternehmen.jsp

Hier ist der wichtige Teil, bei dem wir jQuery verwenden, um den Server zu erreichen. Beachten Sie, dass die Daten mithilfe des .autocomplete-Ereignisses an das Textfeld gebunden werden.

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Spring MVC Auto Complete with JQuery</title>
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

</head>
<body>

	<h2>Spring MVC Autocomplete with JQuery</h2>
	<form:form method="post" action="submit" modelAttribute="companyForm">
		<table>
			<tr>
				<th>CEOs</th>
				<td><form:input path="ceos" id="ceos" /></td>
			</tr>
			<tr>
				<th>Companies</th>
				<td><form:input path="companies" id="companies" /></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="Save" /> <input
					type="reset" value="Reset" /></td>
			</tr>
		</table>
		<br />

	</form:form>

	<script type="text/javascript">
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$(document).ready(function() {

    $( "#ceos" ).autocomplete({
        source: '${pageContext.request.contextPath}/get_ceos_list'
    });

    $( "#companies").autocomplete({
        source: function (request, response) {
            $.getJSON("${pageContext.request.contextPath}/get_co_list", {
                term: extractLast(request.term)
            }, response);
        },
        search: function () {
            var term = extractLast(this.value);
            if (term.length < 1) {
                return false;
            }
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
	        terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });

});
</script>

</body>
</html>

3. Spring MVC-Konfigurationen

„dispatcher-servlet.xml“.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
	<context:component-scan base-package="javabeat.net.spring.mvc" />
	<mvc:annotation-driven />
	<bean id="jspViewResolver"
		 >
		<property name="viewClass"
            value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
	</bean>

</beans>

4. Bereitstellungskonfigurationen

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>SpringExamples</display-name>
	<servlet>
		<servlet-name>dispatcher</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dispatcher</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

5. Führen Sie die Spring MVC + jQuery-Anwendung aus

Sie können auf die oben genannte Anwendung zugreifen, nachdem Sie sie auf Ihrem Webserver bereitgestellt haben. Sie würden den Bildschirm wie unten sehen. Wenn Sie die Buchstaben in das Textfeld eingeben, wird das Dropdown-Menü mit Vorschlägen angezeigt.

Spring MVC JQuery-Demo

Laden Sie den Quellcode herunter

[wpdm_file id=115]

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen