IntelliJ的安装和使用
IntelliJ里的project 和module 对应eclipse里的workbench 和project，一个project一个module
建立一个webapplication,
对字体进行设置，save as 一个自己的字体
部署tomcatcat, 点击fix，部署对应的项目
Ajax的第一个项目
1普通的页面跳转 一个servlet,点击校验就 action到/TestServlet，根据url-pattern 找到servlet-name在找到servlet-class
TestServlet.java
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// super.doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.
try{
request.setCharacterEncoding("GBK");
response.setContentType("text/html;charset=GBK");//页面字符的设置
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
if(name == null || name.trim().equals("")){
out.println("用户名不能为空");
}else if(name.equals("qq")){
out.println("用户名已存在");
}else{
out.println("用户名不存在");
}
out.println("<br/><a href=\"index.html\">返回</a>") ;
}catch(Exception e){
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
//super.doPost(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.
doGet(httpServletRequest,httpServletResponse);
}
}
Index.html
<html>
<head><title>Simple jsp page</title></head>
<body>
<form action="TestServlet" method="post">
用户名： <input type="text" name="name">
<input type="submit" value="校验">
</form>
</body>
</html
web.xml
<servlet>
<servlet-name>Test</servlet-name>
<servlet-class>TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Test</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
2，利用ajax进行页面跳转
AjaxServer.java同TestServet.java, 配置servelt
Ajax.html
<head>
<title>ajax的应用</title>
<!--引入对应的文件-->
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
<!-- 没有必要写form，，不需要name属性，需要id属性，利用dom方式找到节点-->
用户名： <input type="text" id="name"/> <br/>
<input type="submit" value="校验" onclick="verify()"/>
<!--div和span的区别是div占一行，span不占一行-->
<div id="result"></div>
</body>
</html>
Jslib下的verify.js
/*
Jquery的方式
function verify(){
//1 接收文本框中的内容
//jquery查找节点的方式，#加id属性
//jquery返回的都是对象，继续使用方法
var jqueryObj = $("#name");
//获取值
var userName = jqueryObj.val();
//2.把文本框中的内容发送给服务器端的servlet
// 使用jquery的xmlhttprequest的get请求的分装
$.get("AjaxServer?name=" + userName,null,callback);
//地址：url = "AjaxServer"
// 参数信息：name = userName
// $.get(url,name,callback);
}
//回调函数
function callback(data){
//3.接收服务器端返回数据
//就是data
//4.显示在div上
//找到节点，
var resultObj = $("#result");
//动态显示
resultObj.html(data);
}
*/
//dom的方式
var xmlHttp;
function createXMLHttpRequest(){
//非ie浏览器
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function verify(){
createXMLHttpRequest();
var userName = document.getElementById("name").value;
var url = "AjaxServer?name=" + userName + "×tampt=" + new Date().getTime();
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){ //全部传完了
if(xmlHttp.status == 200){ //传递的消息正确
var resTextdiv = document.getElementById("result");
resTextdiv.innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}
}
}
浙公网安备 33010602011771号