基本web工程的搭建

最新推荐文章于 2022-11-29 12:02:51 发布

beitian_china

最新推荐文章于 2022-11-29 12:02:51 发布

阅读量161

点赞数

分类专栏： java 文章标签： WEB工程 JQUERY AJAX

本文链接：https://blog.csdn.net/beitian_123/article/details/95230429

版权

java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

摘要

在工作中常常能读到别人许多优秀的代码，在感叹别人天才的同时也痛恨自己的无知和匮乏。反复研究，一丝丝不甘之心终究使自己产生了动手从零开始搭建WEB工程的想法。于是在模仿和探索中逐渐搭建了一个很小很单一的WEB工程，虽然被同事说很LOW，但仍不仅想在这里做简单的记录，既希望对看到此贴的读者有所帮助，也想以这种方式记录自己在工作之余仍努力学习的点点滴滴。世界是复杂的，知识像潮水一样突然涌来，还没想好要学那个，却发现它已经过时；用这句话来相容java和jsp是很贴切的，jsp的框架不下百种，而又焉去焉从？徘徊本身也是一种选择，选择也意味着更深层次的徘徊。虽然，我仍旧选择学较老的jsp框架，使复杂在自己这里变得单一，从而更静心的学习和工作。

作者深知能力和学识有限，如果此贴误导了您，提前抱歉。

1. 前提

本文是基于 https://blog.csdn.net/beitian_123/article/details/94124075 进行说明的，请先浏览。

2. 从jsp到java

程序所操作的一切都是数据在彼此之间的传输，这句话在WEB工程中的反应首先体现在：jsp中的数据如何传输到后台java中。我们不妨修改一下欢迎页面index.jsp，代码如下

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript">
    <%
      //System.out.println("path = " + request.getRequestURI());
      String path = "/ccgmswelcome.do";
    %>
    try{
    	//alert("hello world");
    	window.location.href = "<%=path%>?" + Math.random();
    }catch(ex){
    	window.location.href = "<%=path%>?" + Math.random();
    	alert("sb is you");
    }
    </script>
  </head>
  <body>
  </body>
</html>

上述代码的目的是：给java后台发送一个/ccgmswelcome.do的请求。这里要注意两点：1. path的设定，上述代码中的/ccgmswelcome.do的实际路径应该是http://ip:port/proNm/ccgmswelcome.do; 2. window.location.href 是通用的显示jsp方法。

jsp发送给java后，java需要有对应的处理流程，即捕获/ccgmswelcom.do请求，其代码可以如下写：

@Controller
public class CcgmsWelcome {

	@Value(value="forward:ccgmsWelViewAction.do")
	private String ccgmsWelView;
	
	@RequestMapping("/ccgmswelcome.do")
	public ModelAndView execute(HttpServletRequest request) {
		
		System.out.println("[LoginPageAction]:have execute the execute function +++++++");
		
		return new ModelAndView(this.ccgmsWelView);
	}
}

上述代码中通过@Controller和@RequestMapping来定义一个Bean，而后通过ModelAndView跳转至其他java代码或者jsp代码，上述代码中的return new ModelAndView(this.ccgmsWelView);是跳转到另一个java类，即ccgmsWelViewAction.do，其代码如下

@Controller
public class CcgmsWelViewAction {
	
	@Value(value="public/welcomePage")
	private String successView;

	@RequestMapping("/ccgmsWelViewAction.do")
	public ModelAndView execute(HttpServletRequest request) {
		System.out.println("[OnlineLoginPageAction]: execute");
		return new ModelAndView(this.successView);
	}
}

上述代码最终的目的是跳转至页面welcomPage.jsp。

3. 从java到jsp

在上述例子中，最终跳转到了页面welcomepage中，这里需要用到一点spring的知识：首先需要在配置文件中（dispatcher-servlet.xml）配置java和jsp之间的转换方式，如下

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

上述配置指明了要查找的文件的路径为/WEB-INF/jsp/，同时指明后缀是.jsp，其对应的工程如图

，这里需要注意的一点是：ModelAndView中的值必须和jsp文件名字相同，否则找不到。jsp代码如图

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

<%@ page import= "com.*.*.StringUtils" %>

<%
  String printWords = StringUtils.getPrintWords();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>***</title>
    <script type="text/javascript" charset="UTF-8" src="./js/jquery.js"></script>
  </head>
  <script type="text/javascript">
  
  function login(){
	  document.ccgmsWel.action = "./welPathAddAction.do";
	  document.ccgmsWel.submit();
	  return true;
  }
  
  function alertToPage(){
	  alert("before you select it ,you must know what it is meaning");
	  var inputVal = $("#selectContent").val();
	  if("10" == inputVal){
	    $("#errorMsgTd").show();
	  }
	  
	  var words="hello and how are you";
	  
	  $.ajax({url:"./ajaxTestAction.do?"+Math.random(),
		  data:({inputVal:inputVal, words:words}),
		  type:"POST",
		  cache:"false",
		  dataType:"json",
		  success: function(json){
			  alert("ajax have executed");
			  if(json.isSuccess){
				  alert("ajax success");
				  location.replace(json.nextAction);
			  }else{
				  alert("ajax error");
			  }
		  },
		  error:function(){
			  alert("ajax error");
		  }
	  });
	  
  }
  </script>
  <body id="body" leftmargin="0" topmargin="0">
  <form name="ccgmsWel" method="post" onsubmit="return webcome()" autocomplete="off">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td height="126" valign="top" ><img src="./imag/caocao_01.jpg" height="300"></img></td>
       </tr>
       <tr>
         <td>
	         <table id="selecttable" border="0" cellspacing="0" cellpadding="0">
	           <tr>
		         <td width="110px" align="right">please select:</td>
		         <td>
		           <select id="selectContent" name="selectContent" class="input_select" onchange="alertToPage();">
		             <option value="0" <%if("ccgms welcome".equals(printWords)){%>selected="selected"<%}%>>caocao</option>
		             <option value="10" <%if(!"ccgms welcome".equals(printWords)){%>selected="selected"<%}%>>liubei</option>
		           </select>
		          </td>
		          <td>
		            <span id="ftpid">ftd://</span>
		            <input type="text" id="displayPath" name="displayPath" value="" maxlength="20"></input>
		          </td>
		       </tr>
		       <tr>
		          <td>
		            <table width="100%" border="0" cellspacing="0" cellpadding="0">
		              <tr>
		                <td><span id="sftpfix">按钮</span></td>
		                <td><span class="spanButton"><a id="welcomSub" name="welcomSub" href="javascript:void(0);" onclick="login();return false;">click</a></span></td>
		              </tr>
		            </table>
		          </td>
	           </tr>
	         </table>
         </td>
       </tr>
       <tr><td>
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr>
             <td id="dataStatusTipSpan" style="display: none"></td>
           </tr>
           <tr>
             <td id="errorMsgTd" style="display:none">liubei is a great hero</td>
           </tr>
         </table></td>
       </tr>
     </table>
  </form>
  </body>
</html>

工程运行起来后，通过http://ip:port/即可展示上述页面。页面中用到了jquery框架，将在下面讲解。

4. jquery的基本使用

首先需要到jquery官网下载jquery的源码，而后保存在某个文件中，一般都叫做jquery.js，在页面中需要引用该文件，引用方法是<script type="text/javascript" charset="UTF-8" src="./js/jquery.js"></script>，其中src下的路径在工程中为：

，上述通过ajax发送了./ajaxTestAction.do 请求，该请求对应的代码为：

@Controller
public class AjaxAction {

	@RequestMapping("/ajaxTestAction.do")
	public void execute(HttpServletRequest request, HttpServletResponse response) throws IOException {
		System.out.println("++++++++++ AjaxAction  :   hello world+++++++++++++++");
		String inputVal = request.getParameter("inputVal");
		if(null == inputVal) {
			System.out.println("inputVal is null");
			return;
		}
		
		System.out.println("inputVal = " + inputVal);
		
		String words = request.getParameter("words");
		System.out.println("words=" + words);
		AjaxResult ar = new AjaxResult();
		ar.setSuccess(true);
		ar.setResultMsg("beitian is great man");
		ar.setNextAction("/ajaxresultaction.do?");
		System.out.println("ar="+ar);
		PrintWriter pw = response.getWriter();
		pw.println(ar.toString());
		pw.close();
	}
}

AjaxResult是返回给上述页面的值，采用json格式。其中AjaxResult的toString()函数如下

 public String toString() {
    	StringBuilder sb = new StringBuilder();
    	sb.append("{\"isSuccess\":").append(this.isSuccess).append(',');
    	sb.append("\"resultMsg\":").append("\"").append(this.resultMsg).append("\",");
    	sb.append("\"nextAction\":\"").append(this.nextAction).append("\",");
    	sb.append("\"isSupportVerifycode\":").append(this.isSupportVerifycode).append("}");
    	return sb.toString();
    }

页面收到请求后做相应的调整，而后跳转至/ajaxresultaction.do页面。

beitian_china

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本web工程的搭建

摘要在工作中常常能读到别人许多优秀的代码，在感叹别人天才的同时也痛恨自己的无知和匮乏。反复研究，一丝丝不甘之心终究使自己产生了动手从零开始搭建WEB工程的想法。于是在模仿和探索中逐渐搭建了一个很小很单一的WEB工程，虽然被同事说很LOW，但仍不仅想在这里做简单的记录，既希望对看到此贴的读者有所帮助，也想以这种方式记录自己在工作之余仍努力学习的点点滴滴。世界是复杂的，知识像潮水一样...
复制链接

扫一扫