java - 如何使用 AJAX 响应修改 Spring mvc 项目中的现有 url?

标签 java javascript jquery ajax spring-mvc

我正在开发一个 Spring MVC 项目,该项目的主页有两个输入字段。两个输入字段都是 String 类型。但是 regNo 字段获取数字,如果用户输入 regNo,它应该被带到 Controller 中的相应方法。如果用户输入了名称,则应将其带到 Controller 中的相应方法。

网络.xml

<web-app version="2.2" id="WebApp_ID">

    <!-- <display-name>Archetype Created Web Application</display-name> -->

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/appContext.xml</param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring/dispatcher-servlet.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/mvc/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>/WEB-INF/jsp/template.jsp</welcome-file>  
    </welcome-file-list>
</web-app>

1) id="WebApp_ID"的用途是什么?

瓷砖.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE tiles-definitions PUBLIC    
  "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"   
     "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">


<tiles-definitions>
    <definition name="template" template="/WEB-INF/jsp/template.jsp">
        <put-attribute name="title" value=""/>
        <put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
        <put-attribute name="body" value="/WEB-INF/jsp/ads.jsp  "/>
        <put-attribute name="center" value="/WEB-INF/jsp/ads.jsp" />
        <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" /> 
    </definition>

    <definition name="header" extends="template">
        <put-attribute name="title" value="" />  
        <put-attribute name="body" value="/WEB-INF/jsp/ads.jsp" />  
    </definition>

    <definition name="numberResult" extends="template">
        <put-attribute name="title" value="" />  
        <put-attribute name="body" value="/WEB-INF/jsp/nResult.jsp" />  
    </definition>

    <definition name="nameResult" extends="template">
        <put-attribute name="title" value="" />  
        <put-attribute name="body" value="/WEB-INF/jsp/neResult.jsp" />  
    </definition>

调度器-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
                    http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.1.xsd     
                    http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
                    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">

    <context:component-scan base-package="com.ProjectCtxt.www.controller"/>

    <mvc:annotation-driven />

    <mvc:resources mapping="/resources/**" location="/resources/" />

  <!--   <bean id="jspViewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          p:prefix="/WEB-INF/jsp/"
          p:suffix=".jsp" /> -->

      <bean class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
            <property name="definitions">
                <list>
                    <value>/WEB-INF/tiles.xml</value>                       
                </list>
            </property>        
        </bean>

       <bean class="org.springframework.web.servlet.view.tiles2.TilesViewResolver"/>

        <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
            <property name="viewClass">
                <value>
                    org.springframework.web.servlet.view.tiles2.TilesView
                </value>
            </property>
        </bean>  

</beans>

项目 Controller .java

@Controller("resultController")
public class ResultController {

    private final ResultService resultService;

    @Autowired
    public ResultController(ResultService resultService) {
        this.resultService = resultService;
    }


    @RequestMapping(value ="/template", method = RequestMethod.GET)
    public String getPersonList(ModelMap model) {
        System.out.println("We are coming into this place");
        return   "header";
    }


    @RequestMapping(value = "/search/s", method = RequestMethod.GET, params = { "regNo" })
    public String getStudentResult(@RequestParam(value = "regNo", required = true) String regNo, ModelMap model){
        System.out.println("I am coming here when I enter regNo and AJAX works");
        model.addAttribute("studentResult",resultService.getStudentResult(regNo));      
        return "numberResult";
    }


    @RequestMapping(value = "/search/l/studentName={studentName}", method = RequestMethod.GET, params = { "studentName" })
    public String anotherMethod(String studentName, ModelMap model){

        return "nameResult";
    }
}

标题.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


 <head>
 <script src="http://code.jquery.com/jquery.min.js"></script>

 </head>


      <form method="GET" >
                <input  type="text" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"></input>      
                <input  type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>

                <button onclick="processInput();">Search
                </button>
    </form>

<script>
 function processInput(){  
     if (document.getElementById('regNo').value !=""){

          $.ajax({  
                type : 'GET',  
                url : "search/s",  
                data : { "regNo":$("#regNo").val()},
                success : function(studentResult) {  
                    //show your result
                   // alert("Value");
                    $('#displayArea').html(studentResult);  }  
            });  
        }else if (document.getElementById('studentName').value !=""){
            $.ajax({  
                type : 'GET',  
                url : "search/l",  
                data : { "studentName":$("#studentName").val(),
                success : function(result) {  
                    //show your result
                }}  
            });
        }  
}  
 </script>

模板.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!DOCTYPE   html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<center>
    <table width="750" border="0" cellpadding="2" cellspacing="2" align="center">
    <tr>
        <td><tiles:insertAttribute name="header" />
        </td>
    </tr>
    <tr>       
        <td><tiles:insertAttribute name="body" /></td>
    </tr>
    <tr>
        <td height="225"><tiles:insertAttribute name="footer" />
        </td>
    </tr>
</table>
</center>
</html>

数字结果.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
 <c:out value="This is working"/>
  <c:out value="${studentResult.name}"/><br/>
  <c:out value="${studentResult.regNo}"/><br/>
    <c:out value="${studentResult.deptName}"/><br/>
      <c:out value="${studentResult.collName}"/><br/>

<div id="displayArea">
 <c:out value="${studentResult.name}"/><br/>
  <c:out value="${studentResult.regNo}"/><br/>
    <c:out value="${studentResult.deptName}"/><br/>
      <c:out value="${studentResult.collName}"/><br/>

</div>       

2)用户在header.jsp中输入regNo,我希望结果显示在numberResult.jsp中

3) 我的第一个 url 是 localhost:8080/ProjectCtxt/mvc/template 转到主页。当我在输入字段中输入 regNo 时,我在浏览器中的 url 显示 localhost:8080/ProjectCtxt/mvc/template/regNo=123&studentName= 。我正在访问 getStudentResult 方法,因为我可以在控制台中看到我的 System.out,但我无法在浏览器中看到输出。

因为我使用的是 tiles,所以我不确定问题出在 tiles 解析器还是 AJAX。请你帮助我好吗?谢谢。

PS:请尽可能用数字回答所有问题,以便对其他人有所帮助。谢谢。

更新:我按如下方式更改了 header.jsp,现在我在 UI 中看到了“numberResult”。但我没有将 numberResult jsp 视为 template.jsp 的主体。我猜“numberResult”文本返回到 AJAX 的成功部分。

  <input  type="text" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"></input>      
  <input  type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name"></input>
  <input id="inputFields" type="button" value="Search" />


<script>
$(document).ready(function(){
    $('#inputFields').click(function(){
       processInput();
    });
  });


 function processInput(){  
     if (document.getElementById('regNo').value !=""){

          $.ajax({  
                type : 'GET',  
                url : "search/s",  
                data : { "regNo":$("#regNo").val()},
                success : function(studentResult) {  
                    //show your result
                    alert("Value");
                    $('#displayArea').html(studentResult);  //this line displays text //"numberResult". But it doesn't change the jsp as well as the url. Now my url looks as //localhost:8080/mvc/template and the body of the jsp doesn't have numberResult.jsp
                    }  
            });  
        }else if (document.getElementById('studentName').value !=""){
            $.ajax({  
                type : 'GET',  
                url : "search/l",  
                data : { "studentName":$("#studentName").val(),
                success : function(result) {  
                    //show your result
                }}  
            });
        }  
}  
 </script>


<div id="displayArea">
 <c:out value="${studentResult.name}"/><br/>
  <c:out value="${studentResult.regNo}"/><br/>
    <c:out value="${studentResult.deptName}"/><br/>
      <c:out value="${studentResult.collName}"/><br/>

</div>  

最佳答案

尝试将注解@ResponseBody 添加到您的 Controller

@RequestMapping(value = "/search/s", method = RequestMethod.GET, params = { "regNo" })
@ResponseBody
public String getStudentResult(@RequestParam(value = "regNo", required = true) String regNo, ModelMap model){
    System.out.println("I am coming here when I enter regNo and AJAX works");
    model.addAttribute("studentResult",resultService.getStudentResult(regNo));      
    return "success";
}

关于java - 如何使用 AJAX 响应修改 Spring mvc 项目中的现有 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26136283/

相关文章:

java - 始终返回 true 的内置 Java 8 谓词?

java - Maven EJB 打包依赖库

javascript - 我如何制作一个动态的CSS类?

javascript - 当我在浏览器中点击刷新时,我丢失了 jquery 编程

jquery - 如何使 jQuery 对话框弹出窗口保持在浏览器中央

java - 在 Activity 中显示谷歌地图(不是MainActivity)

javascript - 基于 A 帧时间轴的动画编辑器

javascript - FBQ(Facebook 事件)与 Angular 4

javascript - 如何在事件中获取 JavaScript 中的变量值?

java - java.awt.FontFormatException : bad table, tag=1196445523 表示什么?