php bootstrap ajax表单提交-php教程-PHP中文网

首页

后端开发

php教程

php bootstrap ajax表单提交

PHPz

Apr 13, 2018 pm 04:45 PM

ajaxbootstrapphp

本篇文章介绍的内容是php bootstrap 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>

相关推荐：

Bootstrap教程

PHP实现各种经典算法详解

以上是php bootstrap ajax表单提交的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

PHP的当前状态：查看网络开发趋势Apr 13, 2025 am 12:20 AM

PHP在现代Web开发中仍然重要，尤其在内容管理和电子商务平台。1)PHP拥有丰富的生态系统和强大框架支持，如Laravel和Symfony。2)性能优化可通过OPcache和Nginx实现。3)PHP8.0引入JIT编译器，提升性能。4)云原生应用通过Docker和Kubernetes部署，提高灵活性和可扩展性。

PHP与其他语言：比较Apr 13, 2025 am 12:19 AM

PHP适合web开发，特别是在快速开发和处理动态内容方面表现出色，但不擅长数据科学和企业级应用。与Python相比，PHP在web开发中更具优势，但在数据科学领域不如Python；与Java相比，PHP在企业级应用中表现较差，但在web开发中更灵活；与JavaScript相比，PHP在后端开发中更简洁，但在前端开发中不如JavaScript。

PHP与Python：核心功能Apr 13, 2025 am 12:16 AM

PHP和Python各有优势，适合不同场景。1.PHP适用于web开发，提供内置web服务器和丰富函数库。2.Python适合数据科学和机器学习，语法简洁且有强大标准库。选择时应根据项目需求决定。

PHP：网络开发的关键语言Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7