今天用前端神器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. jQuery使用大全

    我的程序人生 提供基于Lesktop的IM二次开发,联系QQ:76159179 CnBlogs Home New Post Contact Admin Rss Posts - 476  Article ...

  2. 645. Set Mismatch

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

  3. Java中创建数组的几种方法

    Java中创建数组的几种方法 public static void main(String[] args) { //创建数组的第一种方法 int[] arr=new int[6]; int intVa ...

  4. 2018.10.22 bzoj1009: [HNOI2008]GT考试（kmp+矩阵快速幂优化dp）

    传送门 f[i][j]f[i][j]f[i][j]表示从状态"匹配了前i位"转移到"匹配了前j位"的方案数. 这个东西单次是可以通过跳kmp的fail数组得到的 ...

  5. Django入门与实践-第17章：保护视图(完结)

    http://127.0.0.1:8000/boards/1/ #boards/views.py from django.contrib.auth.decorators import login_re ...

  6. IntelliJ IDEA 2017版 spring-boot使用Spring Data JPA使用Repository<T, T>编程

    1.环境搭建pom.xml搭建 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  7. SessionCacheTest03.testLoad Unrooted Tests initializationError

    这个错误主要是没有加载@Test这个标签,就是把其转化为一个juit测试的类.增加之后就没有问题了,当然还有很多人说是自己的Juit的版本问题,那就改下版本,还有说是没有加载两个类包,为了完整我就把包 ...

  8. tred_extract_EDED_new

    # -*- coding:utf-8 -*- import re ''' 适应新版本 ''' year='17a'#用户自定义 ss='./data/'#根目录 filename = ss+'EDED ...

  9. python读取文件另存为

    fr = open(filename_r,encoding='cp852') w2 = open(filename_w,'a')#a代表追加 w代表重写 for line in fr: w2.writ ...

  10. 基于MATLAB的中值滤波算法实现

    在实时图像采集中,不可避免的会引入噪声,尤其是干扰噪声和椒盐噪声,噪声的存在严重影响边缘检测的效果,中值滤波是一种基于排序统计理论的非线性平滑计数,能有效平滑噪声,且能有效保护图像的边缘信息,所以被广 ...