今天用前端神器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. 为什么c++中返回成员变量的指针，会破坏了封装？

    上述代码中,get()函数返回的是类成员变量的name的地址,这是很危险的,name是私有的,意味这不想被客户访问,但是如果返回name的地址,那么外部函数就可以修改name,这就破坏了封装性. 为什 ...

  2. 2018.09.15[POI2008]BLO-Blockade（割点）

    描述 There are exactly nn towns in Byteotia. Some towns are connected by bidirectional roads. There ar ...

  3. hdu-1061（快速幂）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1061 思路:快速幂 #include<iostream> #include<cstd ...

  4. [转]Go与C语言的互操作

    Go有强烈的C背景,除了语法具有继承性外,其设计者以及其设计目标都与C语言有着千丝万缕的联系.在Go与C语言互操作(Interoperability)方面,Go更是提供了强大的支持.尤其是在Go中使用 ...

  5. 对于Serializable id类型的数据的测试

    今天编写了一个这样的例子,然后进行了Junit测试,但是发现类型总是不匹配,最后测出如下 public <T> void deleteEntry(Class<T> t, Ser ...

  6. spring3 hibernate4整合后无法查询数据库

    spring3和hibernate4整合后无法查询数据库,一方面是因为已经spring3中没有对hibernate4 HibernateTemplate的支持,另外一个就是需要在hibernate的配 ...

  7. Linux创建其他用户并为之授权

    转载自:https://www.linuxidc.com/Linux/2016-11/137549.htm:加了一些补充说明 前言 笔记本安装了一个CentOS,想要让别人也可以登录访问,用自己的账号 ...

  8. （最小生成树） Networking -- POJ -- 1287

    链接: http://poj.org/problem?id=1287 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7494 ...

  9. 两种方式创建支持SSH服务的docker镜像

    方法一:基于commit命令创建 1.首先,从docker的源中查看我们需要的镜像,本案例中使用Ubuntu作为基础镜像. # federico @ linux in ~ [16:57:38] $ s ...

  10. LeetCode141：Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usin ...