今天用前端神器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. 521. Longest Uncommon Subsequence I

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  2. 2018.09.29 bzoj3885: Cow Rectangles（悬线法+二分）

    传送门 对于第一个问题,直接用悬线法求出最大的子矩阵面积,然后对于每一个能得到最大面积的矩阵,我们用二分法去掉四周的空白部分来更新第二个答案. 代码: #include<bits/stdc++. ...

  3. HDU 2393 Higher Math （判断直角三角形）

    题意:给定三个边,判断是不是直角三角形. 析:水题,勾股定理... 代码如下: #include <iostream> #include <cstdio> #include & ...

  4. jquery文件上传控件 WebUploader

    WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子:  这个样子是默认的效果.  这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...

  5. WPF 嵌入字体文件

    官方说明文档:将字体与应用程序一起打包 https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/advanced/packaging-fonts-w ...

  6. mac下svn无法上传.a文件的问题

    Xcode自带的svn和Versions以及一些其它工具都默认ignore".a"文件. 解决办法有两个: 方法一:使用命令行添加文件([转]原文在这) 1.打开终端,输入cd,空 ...

  7. Hdu2102 A计划 2017-01-18 14:40 60人阅读 评论(0) 收藏

    A计划 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  8. springMVC 开涛 Controller接口控制器

    通过注解实现控制器类,所以不用看Controller接口了.把之前的笔记保存下. 笔记(图片):http://pan.baidu.com/s/1mgMNDna 第三章看不太懂,3.2 3.3.只了解到 ...

  9. Oracle SQL Trace 和 10046 事件

    http://blog.csdn.net/tianlesoftware/article/details/5857023 一. SQL_TRACE 当SQL语句出现性能问题时,我们可以用SQL_TRAC ...

  10. Thread in depth 3:Synchronization

    Synchronization means multi threads access the same resource (data, variable ,etc) should not cause ...