get請求
jQuery.get(url,[data],[callback],[type]):通過遠程HTTP GET請求載入信息
這是一個簡單的get請求功能以獲取複雜.ajax。
參數：
url:待載入頁面的URL
data:待發送key/value參數
callback:載入成功時回調函數
type:返回內容格式:xml,html,script,json,text,_default
案例:
創建登錄servlet
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//response.setHeader("content-type","text/html;charset=utf-8");//以前的html方式返回信息
response.setHeader("content-type","text/json;charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
Map<String,Object> map=new HashMap<>();
if("szl".equals(username)&&"123".equals(password)){
map.push("success",1);
map.push("errMsg","");
}else{
map.push("success",0);
map.push("errMsg","用戶名或密碼錯誤");
}
//創建json格式的mapper對象
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().write(json);
}
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}
HTML頁面
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(funtion(){
//按鈕綁定事件
$('#loginBtn').click(function(){
//獲取表單數據
var username=$('#username').val();
var password=$('#password').val();
//封裝表單數據 username=szl&password=123
//封裝成對象
var params={'username':username,'password':password};
console.log(params);
//發送get請求
val url='${pageContext,request,contextPath}/LoginServlet';
$.get(url,params,function(data){
//data服務器返回的數據
console.log(data)；
//把data轉成對象
var result=JSON.parse(data);
if(result.success==1){
//登錄成功
$('#tip').text("登錄成功");
}else{
//登錄失敗
$('#tip').text(result.errMsg);
}
},'text');
});
});
</script>
</head>
<body>
<span style="color:red" id="tip"></span>
<form>
用戶名:<input type="text" name="username" id="username"><br>
密碼:<input type="password" name="password" id="password"><br>
<input type="button" id="loginBtn" value="登錄">
</form>
</body>
post請求
jQuery.post(url,[data],[callback],[type]):通過遠程HTTP POST請求載入信息
這是一個簡單的POST請求功能以獲取複雜.ajax。
參數：
url:發送請求地址
data:待發送key/value參數
callback:載入成功時回調函數
type:返回內容格式:xml,html,script,json,text,_default
案例:
創建登錄servlet
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//response.setHeader("content-type","text/html;charset=utf-8");//以前的html方式返回信息
response.setHeader("content-type","text/json;charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
Map<String,Object> map=new HashMap<>();
if("szl".equals(username)&&"123".equals(password)){
map.push("success",1);
map.push("errMsg","");
}else{
map.push("success",0);
map.push("errMsg","用戶名或密碼錯誤");
}
//創建json格式的mapper對象
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().write(json);
}
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}
HTML頁面
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(funtion(){
//按鈕綁定事件
$('#loginBtn').click(function(){
//獲取表單數據
var username=$('#username').val();
var password=$('#password').val();
//封裝表單數據 username=szl&password=123
//封裝成對象
var params={'username':username,'password':password};
console.log(params);
//發送post請求
val url='${pageContext,request,contextPath}/LoginServlet';
$.post(url,params,function(data){
//data服務器返回的數據
console.log(data)；
//把data轉成對象
var result=JSON.parse(data);
if(result.success==1){
//登錄成功
$('#tip').text("登錄成功");
}else{
//登錄失敗
$('#tip').text(result.errMsg);
}
},'text');
});
});
</script>
</head>
<body>
<span style="color:red" id="tip"></span>
<form>
用戶名:<input type="text" name="username" id="username"><br>
密碼:<input type="password" name="password" id="password"><br>
<input type="button" id="loginBtn" value="登錄">
</form>
</body>
