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

最新推荐文章于 2021-12-30 09:49:50 发布

浮生途

最新推荐文章于 2021-12-30 09:49:50 发布

阅读量781

点赞数

分类专栏： php ajax

本文链接：https://blog.csdn.net/jy123_123/article/details/103324788

版权

php 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

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);

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