Ajax如何實現頁面內跳轉

蝸牛 互聯網技術資訊 2022-10-01 22 0

本篇內容主要講解“Ajax如何實現頁面內跳轉”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Ajax如何實現頁面內跳轉”吧!

代碼如下:

<script?type="text/javascript"?src="../js/jquery.min.js"></script>
????<script?type="text/javascript">
????????$(function(){????????//作業面局部刷新,不做頁面跳轉的時候,推薦使用ajax
????????????$("#login").click(function(){????????????????//點擊按鈕實現登錄功能
????????????????/*?$.ajax({
????????????????????type:'post',?//type:請求方式,get,post
????????????????????url:'login.action',???//要訪問的后臺地址
????????????????????data:{
????????????????????????'uname':$("#uname").val(),
????????????????????????'pwd':$("#pwd").val()
????????????????????},
????????????????????success:function(result)?{
????????????????????????if(result=='1')?{
????????????????????????????//1.welcome
????????????????????????????location.href="welcome.jsp";
????????????????????????}?else?{
????????????????????????????//2.login
????????????????????????????$("#tip").show();
????????????????????????}
????????????????????}
????????????????});?*/
????????????????/*?$.post('login.action',{
????????????????????'uname':$("#uname").val(),
????????????????????'pwd':$("#pwd").val()
????????????????},function(result){
????????????????????//回調函數:當后臺成功響應結果時,會自動調用
????????????????????if(result=='1')?{
????????????????????????//1.welcome
????????????????????????location.href="welcome.jsp";
????????????????????}?else?{
????????????????????????//2.login
????????????????????????$("#tip").show();
????????????????????}
????????????????});?*/
????????????????$.get('login.action?uname='+$("#uname").val()+'&pwd='+$("#pwd").val(),function(result){????????????????????//回調函數:當后臺成功響應結果時,會自動調用
????????????????????if(result=='1')?{????????????????????????//1.welcome
????????????????????????location.href="welcome.jsp";
????????????????????}?else?{????????????????????????//2.login
????????????????????????$("#tip").show();
????????????????????}
????????????????});
????????????})
????????})????</script>

body之中的內容:

??<body>
????<table>
????????<tr>
????????????<td>用戶名:</td>
????????????<td>
????????????????<input?type="text"?id="uname">
????????????</td>
????????</tr>
????????<tr>
????????????<td>密碼:</td>
????????????<td>
????????????????<input?type="password"?id="pwd">
????????????</td>
????????</tr>
????????<tr>
????????????<td?colspan="2">
????????????????<input?type="button"?value="登錄"?id="login">
????????????</td>
????????</tr>
????</table>
????<span?id="tip"?style="color:?red;display:?none;">用戶名或密碼錯誤</span>
??</body>

LoginServlet.java中的doPost()方法:

????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????PrintWriter?out?=?response.getWriter();
????????String?uname=request.getParameter("uname");
????????String?pwd=request.getParameter("pwd");
????????System.out.println(uname);????????//1.登錄成功
????????//2.登錄失敗
????????if("admin".equals(uname)&&"123".equals(pwd))?{????????????//welcome
????????????out.print("1");
????????}?else?{????????????//login
????????????out.print("2");
????????}????????out.flush();????????out.close();
????}

到此,相信大家對“Ajax如何實現頁面內跳轉”有了更深的了解,不妨來實際操作一番吧!這里是蝸牛博客網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看