ajax无刷新提交数据,无刷新显示提交数据

1 篇文章 0 订阅
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <!--线上引入jquery.min.js,不用浪费时间下载,里面封装了ajax,后面无刷新需要调用。-->
    <script src="ajax.js"></script>
</head>
<body>
<div id="form-div">
    <form id="form1"  action="##" method="post">        <!--  特别注意实现无刷新,action,method,都不需要写  -->
        <p><input name="title" id="title" type="text" value="title"/></p>
        <p><input name="text" id="url" type="text" value="url"/></p>
        <p><input type="button" value="插入" onclick="insert()"></p>
        <p><div id="success"></div> </p>
    </form>
</div>
<div id="test"></div>
</body>
</html>

以上只是一个html的简单布局,<div id="test"></div>  显示提交的数据。

下面是一个简单的数据库表,只有id,title,text三个属性。

 

php连接数据库,插入数据代码  :api.php

 

<?php

$con = mysqli_connect("localhost","root","")or die("连接失败"); //连接数据库,失败返回“连接失败”,成功继续执行。

mysqli_select_db($con,"db_ajax" ); //指定连接的数据库名为:db_ajax;
mysqli_set_charset($con,"utf8");  //统一指定编码方式,防止插入中文的时候,出现乱码。

$title = $_POST['title'];//post获取表单name="title"的内容;
$text = $_POST['text'];//post获取表单name="text"的内容;

//下面是向数据库插入数据,tba_ajax代表数据库表名!title,text是字段名,必须跟数据库表里的属性名一致。
$sql="INSERT INTO tb_ajax (title,text)VALUES ('$title', '$text')";
mysqli_query($con,$sql)or die("插入失败");//mysqli_query这个函数的作用是查询,切记有两个参数,两个参数的位置一定不能变。$con代表数据库连接成功返回的资源,$sql代表数据库添加成功的资源。

mysqli_close($con); //释放数据库
?>

 下面是利用ajax实现无刷新提交表单信息到api.php

function insert() {
    load();    //重点第一次调用

    $.ajax({
        type: "POST",//规定表单提交方法
        url: "api.php" ,//接受表单信息的php
        data: $('#form1').serialize(),  //把表单里的信息序列化,这里不做描述,需要了解详情自己下去了解。
        success: function () {  //提交成功,执行
            //提交成功的提示词或者其他反馈代码,可以自行添加
            var result=document.getElementById("success");
            result.innerHTML="成功!";
            load(); //重点第二次调用,这两次调用是为了,实现提交数据后,及时显示数据,不需要手动刷新。
        },
        error : function() {  //提交失败,执行
            //提交失败的提示词或者其他反馈代码
            var result=document.getElementById("success");
            result.innerHTML="失败!";
        }
    });



}

 

php查询 :show_ajax.php

 

<?php
$con = mysqli_connect("localhost","root","")or die("连接失败");
if (!$con)
{
    die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"db_ajax" );
mysqli_set_charset($con,"utf8");
//上面也是连接数据库,之前已做解释

$sql="SELECT * FROM tb_ajax order by id desc  ";  //查询数据库表"tb_ajax" ,"order by id desc"代表以id倒序查询

$result = mysqli_query($con,$sql) or die("查询失败");
    $dataarr = array();
    while($row = mysqli_fetch_array($result)){
            array_push($dataarr, $row);  //入栈,把&row里的数据插入$dataarr.
    }
    mysqli_close($con);
    echo json_encode($dataarr); 把$dataarr转化为json格式。

下面ajax无刷新获取数据,并显示在html页面上

function load(){

    $.ajax({
        type:'post',
        url:'show_ajax.php',
        data:{

        },
        dataType:'json', //数据返回的格式
        success: function(data){
            var str="";
            $.each(data,function(key,value){   调用each函数,遍历返回的data
                str+="<div>"+"标题:"+value.title+"-----内容:"+value.text+"</div>"

            });
            $('#test').html(str);把返回的数据放进"#test"这个盒子里。
        }
    })
}

2019.12.1  再次补充:dataType:'json'  与  JSON.parse(data)的作用一致,都是对data数据进行处理,把json数据格式转化为js对象。

  // dataType:'json'
        success: function(data){
            var da=JSON.parse(data);  //将json格式转化为对象格式
          
            var str="";

            $.each(da,function(key,value){
                str+="<div>"+"标题:"+value.title+"-----内容:"+value.text+"</div>"

            });
            $('#test').html(str);

 

 

最终实现效果:布局有点简单,有时间继续完善。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值