Ajax实战应用-无刷新更新页面

最新推荐文章于 2023-11-24 16:57:40 发布

前端保释人员

最新推荐文章于 2023-11-24 16:57:40 发布

阅读量1.3k

点赞数 1

文章标签： Ajax jquery php

本文链接：https://blog.csdn.net/JBL555/article/details/84897956

版权

效果如下图

附上代码

客户端index.html，服务端insertdb.php（做数据插入处理），messageshowdb（做查询数据处理），代码附上简单分析

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="/static/kindeditor/kindeditor/kindeditor-all.js"></script>

    <style>
        #div1 div{
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            background: #f0f0f0;
            margin-bottom: 1px}
    </style>
    <script>
/*
展示页面
这里load方法采用jaquery的ajax方法，将输入框的标题和内容发送到messageshowdb.php,即url的地址，这里data不安排内容，dataType表示返回的数据类型，success:function(data){}表示成功访问后的回调方法，里面用$.each()循环输出messageshowdb.php返回的json数据，然后拼接将内容写入到div1里面


*/
        function load(){
            var page=1;
            var num=4;
            $.ajax({
                type:'get',
                url:'../controller/messageshowdb.php',
                data:{
                  
                },
                dataType:'json',
                success: function(data){
                    var str="";
                    $.each(data,function(key,value){
                        str+="<div>"+"标题:"+value.title+"-----内容："+value.content+"</div>"
                    });
                    $('#div1').html(str);
                }
            })
        }


/*
提交数据！！
这里是提交按钮的方法，注意必须加$（function(){}）,这个代码表示在dom加载完后就会运行的方法
$.post()第一个参数是要标题内容所要提交到的地址，第二个参数是提交的数据，即标题内容，用json形式提交，第三个参数是成功后回调的方法，第四个参数是数据返回的格式

*/
        $(function(){
            load();
            $('#btn').click(function(){
              var title=$('#title').val();
              var content=$('#content').val();
              $.post("/controller/insertdb.php",{title:title,content:content},
                      function(data){
                          if(data){
                              alert("留言成功");
                          }else {
                              alert("留言失败");
                          }
                          load();
                          //location.href="index.html";
                      },"text"
              )
          })
        })

    </script>
</head>

<body>

<div><h1>留言板</h1></div>
<div>搜索:<input id="con" name="sousuo"><input id="sousuo" type="button" value="确定"></div>
<br><div id="div1"></div>
<div>

        标题:<input type="text" id="title" name="title"><br>
        内容:<br><span><textarea name="content" rows="13" cols="80" id="content"></textarea>
                <script>
                    KindEditor.ready(function(K) {
                        window.editor = K.create('#content',{
                            afterBlur:function(){this.sync();}
                        })
                    });
                </script>
                </span>
        <input type="submit" name="dosub" id="btn" value="上传留言">

</div>
</body>
</html>

insertdb.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018\12\6 0006
 * Time: 22:16
 */
namespace bbs\controller\insertdb;
header( 'Content-Type:text/html;charset=utf-8 ');
require_once "../model/ConnectDb.php";
use bbs\model\ConnectDb\ConnectDb;
$tit=$_POST['title'];
$cont=$_POST['content'];
if(empty($tit)&&empty($cont)){
    die("数据为空");
}
$db=ConnectDb::connect_db();
$sql="insert into message(title,content) values(?,?)";
//$db->query($sql);
//预处理操作数据库
$stmt=$db->prepare($sql);
$stmt->bind_param('ss',$tit,$cont);
if($stmt->execute()){
    //返回1表示添加成功
    echo 1;
    //die("数据为空");
}else{
    //返回0表示添加失败
    echo 0;
}

messageshowdb.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018\12\8 0008
 * Time: 0:12
 */
include '../model/ConnectDb.php';
use bbs\model\ConnectDb\ConnectDb;
//查询数据库所有数据
$sql='select *from message';
$result=ConnectDb::connect_db()->query($sql);
if($result->num_rows>0){
    while($row=$result->fetch_assoc()){
        $arr[$row['id']]['title']=$row["title"];
        $arr[$row['id']]['content']=$row["content"];
    }
}
echo json_encode($arr);

连接数据库文件和数据库配置文件

ConnectDb.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018\12\8 0008
 * Time: 0:12
 */
include '../model/ConnectDb.php';
use bbs\model\ConnectDb\ConnectDb;
//查询数据库所有数据
$sql='select *from message';
$result=ConnectDb::connect_db()->query($sql);
if($result->num_rows>0){
    while($row=$result->fetch_assoc()){
        $arr[$row['id']]['title']=$row["title"];
        $arr[$row['id']]['content']=$row["content"];
    }
}
echo json_encode($arr);

DBConfig.php

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018\12\6 0006
 * Time: 20:16
 */
namespace bbs\model\DbConfig;

/*define("HOST", 'localhost');
define("USER", "root");
define("PWD", "123");
define("DBNAME", 'onecms');*/
class DbConfig
{
    const HOST="localhost";
    const USER="root";
    const PWD="123";
    const DBNAME="onecms";
}

前端保释人员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实战应用-无刷新更新页面

效果如下图附上代码客户端index.html，服务端insertdb.php（做数据插入处理），messageshowdb（做查询数据处理），代码附上简单分析index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;t
复制链接

扫一扫