PHP+JQuery+Ajax初始化网站基本信息（附源码）–PHP

一、思路

　　为了保存用户会员信息的时间长一些，不局限于session的关闭。我们需要将用户信息保存在数据库中，前台每次登录都需要进行校验，来查看用看用户会员信息是否过期，如果没有过期，取出用户会员信息存入session中！
二、核心功能实现

　　前台使用AJAX向后台发出请求,后台（本站采用PHP作为后台语言）连接数据库（采用MySql数据库），获取会员信息并转换城JSON格式。前台获取到JSON格式的对象，将数据解析后在网站DOM中进行展示。
三、实现
1、开发环境及支撑软件：Windows操作系统、Webstrom、NetBeans。
2、目录结构：


3、数据表

4、功能实现代码
index.html(客户端)：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>初始化网站基本信息</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div class="container">
        <div class="row fontsize14 margin_top18">
            <div class="col-md-6 font_weight_bold">
                <input class="font_weight_bold border_none input_wide50 bg_color" type="text" name="groupname" id="username" disabled="disabled"/>欢迎您！
                用户组：<input class="font_weight_bold border_none input_wide50 bg_color" type="text" name="groupname" id="groupname" disabled="disabled" />
                等级积分：<input class="font_weight_bold border_none input_wide40 bg_color color_red" type="text" name="score" id="uid" disabled="disabled" value="(100)"/>
                任务：<input class="font_weight_bold border_none input_wide30 bg_color color_red" type="text" name="groupname" id="task" disabled="disabled" value="(5)"/>
                消息：<input class="font_weight_bold border_none input_wide30 bg_color color_red" type="text" name="groupname" id="message" disabled="disabled" value="(10)" />
            </div>
            <div class="col-md-6  font_weight_bold text-right">个人中心 | 退出</div>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/javascriptAjax.js"></script>
    </body>
</html>

server.php：

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
include_once 'db.class.php';//将操作数据库的文件加载进来
$check = $_GET['check'];//获取请求页面传过来的"check"
if(!$check){//如果不是index页面发出的请求返回false
    return FALSE;
} else {
    $username = $_GET["username"];//获取请求页面传过来的"username"
    $sql = "select *from user where username='$username'";//从user表中查询数据
    $result = $dbObj->getOne($sql);//自定义类和方法实现将查询的数据转化为数组
    !empty($result) ? json_encode($result) : "null";//将数组转化为JSON格式
}

javascriptAjax.js：

$("document").ready(function(){
//    var url="server.php?inAjax=1&do=checkMember&username=李小明";
    var url="server.php?check=1&username=李小明";
    var data={};
    $.get(url,data,function(msg){
        var jsonObj = eval("("+msg+")");//eval()函数不建议使用，不安全
        $("#username").val(jsonObj.username);
        $("#groupname").val(jsonObj.groupname);
    })
})

5、效果图

6、源代码：JavascriptAjax.zip

本文如有错误或者不当之处还望各位网友们指证一下，好做修改……谢谢！

 
 
 
 
 
 

版权声明：本文为qikeyishu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qikeyishu/p/8928715.html