AJAX-實現頁面內跳轉例項

阿新 • • 發佈：2019-01-20

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-實現頁面內跳轉例項

Ajax例項練習： <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript">

Markdown實用語法之實現頁面內跳轉

頁面內跳轉非常實用，在文件描述過程中經常會關聯到頁面內的其他章節內容，為了方便讀者閱讀，會需要新增頁面跳轉的功能；除此之外，頁面內跳轉，也可以用來手動製作目錄。實現頁面跳轉的方式也挺簡單，可以實現跳轉到任意標號的標題，但是也是非常的講究，否則會出現無

JAVA-JSP內置對象之response對象實現頁面自動跳轉

style cli 分享 ron gif 添加頁面 con 頁面跳轉相關資料：《21天學通Java Web開發》 response對象實現頁面自動跳轉1.可以通過response對象的addHeader()方法添加一個標題為Refresh的標頭，並指定

vue.js實現頁面倒計時跳轉功能

his 首頁 turn return () data col world mit 需求分析：頁面倒計時5秒後進入系統主頁，數字需要實時更新！ <template> <div class=""> <h1>歡迎來到Vue.js

Github markdown頁面內跳轉

.html png 超鏈接右擊如何 AI 技術分享技術 In 基本操作: 請看這裏最典型的就是[alt_content](#jump) 但有時, jump是不太好直接看出來的, 比如下面這個標題, 格式復雜, 那如何獲取相應的jump呢? 在Github中, 鼠標

頁面內跳轉到相應位置的3種方法

sharp PE pan 功能 color onclick span ML round 首先設置所需的css和html 設置css .demo{ width: 200px; height: 200px;

Android Studio 使用Intent實現頁面的跳轉（帶參數）

col xtra ima alt main 都是 img mage android 不管是在APP，還是在網站中，頁面之間的跳轉都是很常見的，本文主要講一下在APP中，如何通過Intent實現頁面的跳轉。不帶參數：寫在MainActivity頁面的代碼： 1 In

[轉載]MarkDown技巧：兩種方式實現頁內跳轉

MarkDown技巧：兩種方式實現頁內跳轉本文轉載自：https://www.cnblogs.com/JohnTsai/p/4027229.html?tdsourcetag=s_pctim_aiomsg 文章頭部在這裡寫文章時，突然發現如果寫了一篇很長的文章，要是

Android stdio 學習之 Intent 類（啟動外部瀏覽器或實現頁面元件跳轉）

首先 1.確保已經安裝好了Android stdio 環境 2.瞭解Intent類是什麼詳情可檢視網址：https://developer.android.com/guide/components/intents-filters 說白了，Intent就是一個捆綁各個

struts2註解實現頁面的跳轉

註解實現的頁面跳轉其特點是不用配置檔案struts.xml因而可以實現零配置。需要的基本包： commons-fileupload-1.2.1.jar commons-io-1.3.2.jar c

安卓頁面之間實現頁面的跳轉，並實現資料的傳輸

響應函式的事件在一個介面輸入文字，然後跳轉到另一介面依然顯示 login 表示內部類監聽 public void login(View view){ Intent intent=new Intent(QQLoginActivity.this,QQBackAct

React-Native學習筆記之：導航器Navigator實現頁面間跳轉

Navigator用來實現不同頁面的切換，想設定Navigator，必須確定一個或多個呼叫routes物件，去定義每個場景。還可以利用renderScene方法，導航欄可以根據指定的路由來渲染場景。

使用Markdown實現頁內跳轉

本人由於使用Markdown寫文章比較多，自然遇到了不少問題，其中一個就是頁面內部的跳轉。關於頁內跳轉的方法有很多，網上一搜也一大把，但是效果都不是很理想——往往會跳轉出新的頁面或者是重新載入頁面。由於Markdown支援HTML程式碼，這次突發奇想使用a標

Intent實現頁面之間跳轉

（首發於 2017 年 9 月 14 日） 1. Intent實現頁面之間的跳轉 1.1 無資料傳遞頁面跳轉 1 Intent intent = new Intent(MainActivity.this,DemoActivity.class); 2 startActivity(intent);

ReactNative基礎（五）使用react-navigation實現頁面的跳轉、引數的傳遞（StackNavigator）

此部落格基於react-native-0.48.4 Navigator（導航欄）在ReactNative v0.43之前的時候官方提供了Navigator元件，在v0.44版本之後官

js實現頁面定時跳轉

下面是簡單的程式碼實現： <html> <head></head> <body> <h1>提交成功</h1> <ahref="http://www.so.com">3秒後系統會自動跳轉，也可點選本處直接跳</a

利用jquery&iframe標籤實現頁面無跳轉的表單檔案上傳

最近公司專案修改上傳檔案效果，大致效果就是上傳檔案提交時不能進行頁面跳轉，然後最好是沒有提交按鈕，用jquery實現表單的提交。想了想，用ajax好像不太好實現這種效果了，首先是ajax如何把上傳的檔案傳遞給後臺就遇到了瓶頸；其次再是如何配合ajax實現jque

Navigator實現頁面的跳轉

為了熟悉Navigator的頁面跳轉，通過一個小例子實現：註冊頁面輸入之後進入註冊等待頁面首先程式入口頁面index.android.js 程式碼為： import React, {Component} from 'react'; import {AppRegistry,

ReactNative基礎（五）使用react-navigation實現頁面的跳轉、引數的傳遞（StackNavigator

作者：阿鍾部落格：http://blog.csdn.net/a_zhon 此部落格基於react-native-0.48.4 Navigator（導航欄）在ReactNative v0.43之前的時候官方提供了Navigator元件，在v0.44版本之後官方就把他廢棄了這是為什麼呢？原因就是有個比他

Android開發實現頁面的跳轉

學習Android開發整整一天了，想寫一個小的頁面跳轉的Demo，網上谷歌百度了十來分鐘，發現安卓跳轉有兩種實現方法（不全勿噴） 1.第一種實現方式 Android中一個Activity對應於一個頁面，通過呼叫Activity的StartActivity方法實

AJAX-實現頁面內跳轉例項

Ajax例項練習：

相關推薦