コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > 本文

phpブートストラップAjaxフォーム送信

PHPz
リリース： 2023-03-23 18:46:02
オリジナル
2773 人が閲覧しました

この記事では、php ブートストラップの Ajax フォームの送信を紹介します。必要な友達は参照してください。

コードを直接投稿してください:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    {load href="__STATIC__/bootstrap/css/bootstrap.min.css"}
    {load href="__STATIC__/css/base.css"}

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<p class="container" style="background: #fff;min-height: 200px;">
    <!--一行内容-->
    <p class="row">
        <p class="col-md-3"></p>
        <p class="col-md-6" style="background: #fff;min-height: 150px;">
            <p class="login-header">用户登录</p>
            <p class="login-form">
                <p class="alert alert-danger error-tips" style="display: none;" role="alert"></p>
                <p class="alert alert-success success-tips" style="display: none;" role="alert"></p>

                <form class="login">
                    <p class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="text" name="name" class="form-control" id="exampleInputEmail1"
                               placeholder="请输入您的邮箱">
                    </p>
                    <p class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" name="password" class="form-control" id="exampleInputPassword1"
                               placeholder="请输入您的密码">
                    </p>
                    <p class="checkbox">
                        <label>
                            <input type="checkbox"> 下次自动登录
                        </label>
                    </p>
                    <button type="button" class="btn btn-default login-btn">用户登录</button>
                </form>
            </p>
        </p>
        <p class="col-md-3"></p>
        <!--<p class="col-md-8" style="background: #999;min-height: 150px;">右侧菜单</p>-->
    </p>
</p>
<!--<p class="container-fuild" style="background: #eee;min-height: 200px;">-->
<!--<h1>你好，世界！</h1>-->
<!--</p>-->

<!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) -->
<!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
{load href="__STATIC__/jquery/jquery.min.js"}
<!-- Include all compiled plugins (below), or include inpidual files as needed -->
{load href="__STATIC__/bootstrap/js/bootstrap.min.js"}
<!--<script src="js/bootstrap.min.js"></script>-->
<script>
    $(function(){
        // 给登录按钮增加事件监听
        $(&#39;.login-btn&#39;).click(function(){

            //alert(&#39;你点击了登录按钮&#39;);
            // 1 获取表单的数据【一般会在javascript中进行验证】
            // 2 使用ajax方法进行提交
            // 3 根据服务器的返回值进行操作（具体局部刷新操作）

            // 1.挨个获取
            var _name = $(&#39;input[name="name"]&#39;).val();
            var _password = $(&#39;input[name="password"]&#39;).val();

            // 2.使用jq的serialize()
            // alert($(&#39;.login&#39;).serialize());
            //alert(_password);

            //todo::前端js数据验证

            $.ajax({
                type : &#39;POST&#39; ,
                url : "{:url(&#39;checkLoginData&#39;)}",
                data : $(&#39;.login&#39;).serialize(),
                dataType: &#39;json&#39;,
                success : function(data)
                {
//                    console.log(data);
                    if(data.status == 0)
                    {
                        $(&#39;.error-tips&#39;).text(data.msg).show();
                    }
                    else
                    {
                        $(&#39;.success-tips&#39;).text(data.msg).show();
                        setTimeout(function(){
                            window.location.href = "{:url(&#39;index&#39;)}";
                        },2000);
                    }
                }
            })

        })
    })
</script>
</body>
</html>
ログイン後にコピー

関連する推奨事項:

PHP の詳細さまざまな古典的なアルゴリズムの実装についての説明

以上がphpブートストラップAjaxフォーム送信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
ajax bootstrap php
ソース：php.cn
前の記事：PHPに実装されたさまざまな古典的なアルゴリズムの詳細な説明 次の記事：[phpのクラスとオブジェクト] トラバーサル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
から 2024-04-04 22:16:18
0
1
1450
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート