初学Ajax，将前台输入内容利用PHP传给后台数据库

最新推荐文章于 2024-09-12 14:45:25 发布

梦见Utaoki

最新推荐文章于 2024-09-12 14:45:25 发布

阅读量210

点赞数

分类专栏： JQuery 文章标签： ajax php jquery bootstrap javascript

本文链接：https://blog.csdn.net/iUtaoki/article/details/119966343

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在专升本课程中利用Ajax和Bootstrap创建一个简单的模态框留言板。通过输入姓名和密码，点击登录按钮后，数据通过Ajax异步发送到后台PHP进行验证。如果匹配成功，显示成功提示，否则显示失败提示。

摘要由CSDN通过智能技术生成

本人最近在学习专升本课程，课程繁忙，利用课下或睡前的时间学习了下Ajax传值，下面给大家看下一个非常简单的模态框留言板。

 <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1/dist/css/bootstrap.css">
//记得引入JQ和Bootstrap

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog " style="width:400px;position:relative;top:80px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        请输入姓名和密码
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form"class="form-horizontal">
                    <div class="form-group">
                        <label for="uname"class="col-md-2 control-label">姓名</label>
                        <div class="col-md-6"><input type="text"class="form-control"id="uname"></div>
                </div>
                <div class="form-group">
                    <label for="upwd"class="col-md-2 control-label">密码</label>
                    <div class="col-md-6"><input type="text"class="form-control"id="upwd"></div>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-info"name="login" id="login">
                        登录
                    </button>
                </div>
                    </form>
            </div>
                    <!-- /.modal-content -->
        </div>
                <!-- /.modal -->
    </div>
    </div>
<script>
    $(function(){
        $('#myModal').modal('show');
   
    $('#login').on('click',function(){
        var uname = $('#uname').val();
        var upwd = $('#upwd').val();
        /*console.log(uname);console.log(upwd);*/
$.ajax(
    {type: "post",
    url: "jieshou.php",
    //async:true,
    data: {"uname" : uname, "upwd" : upwd},
dataType: "html",    
    success: function(data){
        //alert('成功！！！');
        //window.location.href="jieshou.php";
    if(data=='1'){
        alert('成功！！！');



    } else {alert('失败！！！');}
    },   error: function(e){
console.log(e.message)
    }
    })
    $('#myModal').modal('hide');
    })})
</script>
    
    <script src="bootstrap-3.4.1/dist/js/bootstrap.js" ></script>

上面这个是前台和JQ部分的代码。

下面的是PHP部分的代码。

<?php
include "conn.php";
$uname = $_POST["uname"];
$upwd = $_POST["upwd"];
$sql="select * from ajax where uname = '$uname' and upwd = '$upwd'";
//$sql="insert into ajax(id,uname,upwd)values(null,'$uname','$upwd')";
$sth = mysqli_query($conn,$sql);
$result = mysqli_fetch_all($sth,MYSQLI_ASSOC);
if($uname == $result[0]["uname"] && $upwd == $result[0]["upwd"]){
    echo '1';
   
}else {echo '0';}/* 
echo $uname;echo "<br>";
echo $upwd;echo "<br>";
echo "123";*/

?>

有不明白的同学欢迎在评论区留言啊。