今天用前端神器Hbuilder连接eclipse中的servlet，真是费了九牛二虎之力，才把问题解决

Hbuilder中的代码：

test.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>Hello MUI</title>

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<meta name="apple-mobile-web-app-capable" content="yes">

		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->

		<link rel="stylesheet" href="../css/mui.min.css">

		<!--App自定义的css-->

		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->

		<style>

			h5 {

				margin: 5px 7px;

			}

		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav">

			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

			<h1 class="mui-title">input（输入框）</h1>

		</header>

		<div class="mui-content">

			<div class="mui-content-padded" style="margin: 5px;">

				<form class="mui-input-group" id="form">

					<div class="mui-input-row">

						<label>Input</label>

						<input type="text" class="mui-input-clear" id="name" name="name">

					</div>

                    <div class="mui-input-row">

						<label>密码</label>

						<input type="text" class="mui-input-clear" id="pwd" name="pwd">

					</div>

					<div class="mui-button-row">

						<button type="button" class="mui-btn mui-btn-primary" onclick="login()">确认</button>  

						<button type="button" class="mui-btn mui-btn-danger" onclick="ajaxFun()">取消</button>

					</div>

				</form>

			</div>

		</div>

		<script src="../js/mui.min.js"></script>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

		<script>

			mui.init({

				swipeBack: true //启用右滑关闭功能

			});

			function login() {

//             var uname=document.getElementById("name").value.trim();

//             var pwd=document.getElementById("pwd").value.trim();

//             mui.toast("0 "+uname+" "+pwd);

             $.ajax({

                 type: "POST",

                 url: "http://127.0.0.1:8080/ServletTest/AjaxTest",

                 data:$('#form').serialize(),

                 acahe:false,

                 success: function(map){

                 mui.toast(map);

             	},

				error:function(){

					mui.toast("失败");

				}

             })

      }

		</script>

	</body>

</html>

这里边要注意的有以下几点：

1.这个里边的css还有js必须要用mui自带的，我这里边的引用是根据目录来的，如果需要粘贴时要将路径改成自己目录的路径，如下图所示：

2.调用ajax，属于jquery，所以需要引用jquery相应的js，我这里引用的是菜鸟教程的网络连接，所以直接复制就好

3.ajax中的路径问题（这个问题困扰了好长时间）

如截图所示：

url的组成有这样几部分，IP地址，如果是本地测试，写上127.0.0.1，不要写成localhost，后边是eclipse中项目的名称，后边的是@WebServlet里边的值（我这是直接创建的servlet），如下图所示：

不要按照完整的路径写上，这样会报错的。

4.在servlet中，要写上一句重要的代码：

response.setHeader("Access-Control-Allow-Origin", "*");

完整的servlet中的代码：

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class AjaxTest

 */

@WebServlet("/AjaxTest")

public class AjaxTest extends HttpServlet {

	private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public AjaxTest() {

        super();

        // TODO Auto-generated constructor stub

    }

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		response.getWriter().append("Served at: ").append(request.getContextPath());

		response.setHeader("Access-Control-Allow-Origin", "*");

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");

		response.setCharacterEncoding("utf-8");

		response.setHeader("Access-Control-Allow-Origin", "*");

		//response.setContentType("application/json");

		String username = request.getParameter("name");

		System.out.println("已经进来了");

		String pwd = request.getParameter("pwd");

		if(username.equals("奥特曼")&&pwd.equals("123456")) {

			response.getWriter().print("登陆正确");

		}else {

			response.getWriter().print("登陆失败");

		}

	}

}

注：我这只是简单的操作，读者想要进一步操作可以将数据库的增删改查都写到这里边在返回到前端，完成数据的交互。

servlet项目的目录截图：

注：启动tomcat时，可以自己创建一个简单的jsp，什么也不要做，否则当启动时会报404的错误，虽然不影响使用，但是看着让人不舒服，当然，你也可以在tomcat文件所在为位置，手动启动tomcat。

如果还有其他问题，可以留言。

Hbuilder用ajax连接eclipse中的servlet例子以及注意事项的更多相关文章

  1. Hbuilder用ajax连接阿里服务器上的servlet以及注意事项

    Hbuiler连接服务器上的servlet的步骤与连接本地项目中的servlet基本一致,详细内容参考上一片博客:https://www.cnblogs.com/ljysy/p/10294640.ht ...

  2. 在Eclipse中编写servlet时出现"The import javax.servlet cannot be resolved" 问题解决办法

    在Eclipse中,project->properties,选择Java Build Path->Libraries->Add External JARs,找到你计算机中tomcat ...

  3. 在Eclipse中配置Tomcat 创建和运行Servlet/JSP

    在Eclipse中配置Tomcat 创建和运行Servlet/JSP 步骤一:在Eclipse中配置Tomcat(注意下载Eclipse IDE for Java EE Developers) (1) ...

  4. 【转】在Eclipse中建立第一个Servlet程序

    转载地址:http://kin111.blog.51cto.com/738881/163354 继上篇在Eclipse中搭好了tomcat环境后,我们建立一个最简单的servlet程序,这个serve ...

  5. 在javaEE下学习web（在eclipse中开发动态的WEB工程，servlet的环境搭建，及servlet的一些方法）

    一个简便的方法实现javaee版的eclipse开发动态的WEB工程(javaWEB项目)1.把开发选项切换到javaEE2. 可以在window->shou view 中找到package e ...

  6. eclipse 中新建文件报错The superclass "javax.servlet.http.HttpServlet" was not found on the Java Buil

    在eclipse中新建文件报错错误提示如下: The superclass "javax.servlet.http.HttpServlet" was not found on th ...

  7. 关于Eclipse中import javax.servlet.*出错

    今天为了调试一下我写的Servlet,突然间,发现我的站点下所有的Servlet全部都出错了,仔细一看,原来是import javax.servlet.*这里出错了. 然后我就上网查阅了一些资料,才发 ...

  8. Eclipse中SVN更改连接用户

    Eclipse中安装了SVN插件,当连接到SVN服务器后,便无法从客户端更改连接帐号 百度一下,也就知道 查看Eclipse中使用的是什么SVN Interface,位置在windows > p ...

  9. 通过win下的eclipse连接虚拟机中伪分布的hadoop进行调试

    VMware虚拟机配置Ubuntu桥接方式(Bridged)使虚拟机和宿主机能互相ping通, 通过win下的eclipse连接虚拟机中伪分布的hadoop进行调试 1.设置Bridged上网方式 V ...

随机推荐

  1. 使用JDBC连接MySql时出现：The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration

    在连接字符串后面加上?serverTimezone=UTC 其中UTC是统一标准世界时间. 完整的连接字符串示例:jdbc:mysql://localhost:3306/test?serverTime ...

  2. 首页焦点图myFocus插件

    首页焦点图myFocus插件   myFocus特性 小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...

  3. css页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  4. 前端之css语法3

    一 float属性 1 基本的浮动规则: block元素和inline元素在文档流中的排列方式. block元素通常被现实独立的一块,独占一行.多个block元素会各自新起一行,默认block预算宽度 ...

  5. 字典树Java实现

    Trie树的原理 Trie树也称字典树,因为其效率很高,所以在在字符串查找.前缀匹配等中应用很广泛,其高效率是以空间为代价的. 利用串构建一个字典树,这个字典树保存了串的公共前缀信息,因此可以降低查询 ...

  6. Quartus调用MOdelsim仿真过程

    quarutsii调用modelsim实际是相对比较简单的.因为不需要选择要编译的库. 调用前的设置:设置调用的工具,也就是下面的Tool name,选择仿真语言,在这里选择为Verilog HDL, ...

  7. cxf-rs 、spring 和 swagger 环境配置切换【github 有项目】

    环境切换的目的是 准生产和生产环境切换时,只修改一个文件就可以达到效果 在spring bean 文件中 配置: <bean class="cn.zno.common.context. ...

  8. PAT 甲 1005. Spell It Right (20) 2016-09-09 22:53 42人阅读 评论(0) 收藏

    1005. Spell It Right (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given ...

  9. hdu 2190 悼念512汶川大地震遇难同胞——重建希望小学

    题目 这道题拿到的时候拼凑了一会,感觉挺难的,然后博客说是:递推,我觉得递推其实就是找规律. 这是别人的思路:对于n米的长度,可以是由n-1长度加1而来,对于增加的1,只有三块1*1的砖一种铺法: 还 ...

  10. 个人项目：实现wc.exe（Java）

    本项目Github地址:https://github.com/NNewBoy/wc 项目相关要求 基本功能:(已实现) -c 统计文件字符数 -w 统计文件词的数目 -l 统计文件行数 扩展功能:(已 ...