今天用前端神器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。
如果還有其他問題，可以留言。