今天用前端神器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. SQA计划和系统测试规程

    SQA计划和系统测试规程 一.SQA计划 1.软件工程 我们小组所做的项目是图书馆管理系统.我们要准确的了解此软件的需求(能够注册登录,查询图书,借书,还书,查看借阅记录等),在此前提进行建模,基于场 ...

  2. servlet-servletContext网站计数器

    1.在项目中新建文件夹新建文件nums.txt 2.在web.xml文件配置 <servlet>     <description>This is the descriptio ...

  3. 2018.10.16 NOIP模拟 长者（主席树+hash）

    传送门 考试的时候开始sb的以为需要可持久化trietrietrie树,发现建树时空都是O(n2)O(n^2)O(n2)的. 然后发现由于每次只从原来的字符串改一个字符. 因此直接主席树维护区间has ...

  4. spring+hibernate 整合异常 Class 'org.apache.commons.dbcp.BasicDataSource' not found

    解决方法 添加 commons-dbcp.jar和commons-pool.jar包

  5. org.hibernate.HibernateException: /hibernate.cfg.xml not found等三个问题

    初次配置hibernate在myeclipse上: 出现三个问题,怎么都不好使,比对代码,没有问题,查看路径还是没有问题: 1.org.hibernate.HibernateException: /h ...

  6. 文件读取ndarry 等价于DataFrame的操作

    LD=loadDatas() userMat=LD.makeRatingMatWithoutUserID() print(type(userMat)) userRatingMat=pd.DataFra ...

  7. （最小生成树） Borg Maze -- POJ -- 3026

    链接: http://poj.org/problem?id=3026 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82831#probl ...

  8. 关闭父类弹出的ifream窗口

    parent.document.getElementById('zhuce').style.display = 'none';

  9. hdu2844

    题目 这道题,刚开始题没读懂,就是这句话:,A1,A2,A3...An and C1,C2,C3...Cn corresponding to the number of Tony's coins of ...

  10. jpg/png格式图片转eps格式的方法--latex自带命令bmeps

    bmeps -h 命令查看bmeps的帮助信息 bmeps -c example.jpg example.eps