PHP + JavaScript AJAX 请求(原生)代码示例

由于今天项目要求需要判断提交的数据数据库是否已存在?为了用户体能友好,又要求不能刷新页面。我只好用AJAX了,由于这个项目是PHP原生写的,AJAX 请求也要求用JavaScript原生。说实话,为了写出此效果代码,不得不补充一点新知识,毕竟有些东西好久不用就会生疏。

 

AJAX原理以及相关知识,我就不详细说了吧!最常用的无非是GET请求与POST 请求,再给大家操作前,先简单补充一点javascript调用ajax基础知识:

 

1、AJAX GET请求示例:

xmlhttp.open("GET","fujieace.php?lname=A&rname=b",true);
xmlhttp.send();

 

2、AJAX POST请求示例:

xmlhttp.open("POST",""fujieace.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("lname=a&rname=b");

 

3、HTML DOM 事件

既然我们用了AJAX ,DOM事件我们是离不开的,许多情况下是需要事件去触发这个AJAX,你不可能做成每秒ajax请求一下,对吧!除非有特殊要求。以下是我常用的几个事件,如下:

onclick 当用户点击某个对象时调用的事件句柄。

onblur 元素失去焦点时触发

onchange 该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea)

 

现在我们已经有了上面这些基本知识了,下面我就直接给大家上代码了。

 

一、前端:index.php

我的前端样式用的是bootstrap4写的。

 

1、这里重点看JavaScript代码,主要是利用 HTML DOM 事件先来触发AJAX ,从而以AJAX方式向服务器发送请求,可以用GET或POST方式带上参数请求,也可以不带,这个根据自己需求。

2、AJAX方式向服务器发送请求后,服务器就会立马处理,并返回数据。返回的数据可以是JSON,也可以是字符串。

3、有了数据以后,我们需要把数据再输出,这就需要用上原生JavaScript代码,例如,我下面的代码就是修改了input表单中value的值。

 <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" autocomplete="on">
                <div class="input-group  mb-4">
                    <div class="input-group-prepend">
                        <span class="input-group-text" >名称</span>
                        <span class="input-group-text" style="color: red;background-color: white;">*</span>
                    </div>
                    <input id="name" onblur="Loadname()" autofocus="autofocus"  type="text" required="required" name="name"  maxlength="20"  class="form-control" placeholder="这将是它在站点上显示的名字。">
                    <div class="col-md-12">
                        <p style="color: #757575">注意:名称是唯一的,请勿重复,否则数据库会插入数据失败!</p>
                    </div>
                </div>

                <div class="input-group  mb-4">
                    <div class="input-group-prepend">

                        <span class="input-group-text" >别名</span>
                        <span class="input-group-text" style="color: red;background-color: white;">*</span>
                    </div>
                    <input id="alias" onblur="Loadalias()" type="text" class="form-control" required="required" name="alias" maxlength="20" pattern="[a-z0-9_-]+" title="匹配规则未通过!" placeholder="‘别名’是在URL中使用的别称,它可以令URL更美观。通常使用小写,只能包含字母,数字,下划线(_)和连字符(-)。">
                    <div class="col-md-12">
                        <p style="color: #757575">注意:别名是唯一的,请勿重复,否则数据库会插入数据失败!</p>
                    </div>
                </div>
</form>
<!--php判断是否允许ajax请求?1=是,0=否-->
<?php if($AJAX === 1){ ?>
    <script>
        function Loadname() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //document.getElementById("name").classList.add(this.responseText);
                    document.getElementById("name").value = this.responseText;
                    //console.log(data);
                }
            };
            var data = "name=" + document.getElementById("name").value + "&type=<?php echo $type;?>";
            //console.log(data);
            xhttp.open("POST", "/ajax.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send(data);
        }
        function Loadalias() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("alias").value = this.responseText;
                    //console.log(data);
                }
            };
            var data = "alias=" + document.getElementById("alias").value + "&type=<?php echo $type;?>";
            //console.log(data);
            xhttp.open("POST", "/ajax.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send(data);
        }
    </script>

<?php } ?>

 

二、后端:ajax.php

这里主要是接收ajax传过来的数据,再处理,怎么处理?逻辑得自己写,需要根据自己情况。最后,再以php返回数据给ajax,也就是php返回数据给前端。

 

由于有些代码不方便公开,我这就给大家展示一个示例,只打印一个数据,就返回给前端了。你可以在这里写你自己的逻辑代码,例如:连接数据库,查询某一条数据?结果返回给前端。

<?php
var_dump($_POST);

 

以下是我今天写的一个ajax post完整请求小示例:

index.php

 <input type="text" id="title" name="title" lay-verify="required" onblur="DraftUnique()" class="layui-input">

<script type="text/javascript">
    function DraftUnique()
    {
        var title = document.getElementById('title').value;
        if(title){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //console.log(xmlhttp.responseText);
                    document.getElementById('post_id').value = xmlhttp.responseText;
                    document.getElementById('title').onblur = '';
                }
            };
            var data = "title="+ +"&alias="+document.getElementById('alias').value+"&category_id="+document.getElementById('category_id').value+"&token=<?php echo $get_token; ?>";
            //console.log(data);
            xmlhttp.open("POST","<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?type=article&action=ajax",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(data);
        }

    }
</script>

 

    A+
发布日期:2021年01月05日 12:02:38  所属分类:Ajax
最后更新时间:2021-03-26 19:55:03
评分: (4 票;平均数4.00 ;最高评分 5 ;用户总数4;总得分 16;百分比80.00)
付杰
PHP零基础入门到精通视频教程
  • ¥ 199.0元
  • 市场价:199.0元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 1999.9元
  • 市场价:20000元
wp dz 帝国 dede phpcms等快速建站服务
wp dz 帝国 dede phpcms等快速建站服务
  • ¥ 999元
  • 市场价:4999元
wordpress站群服务 泛解析二级域名 二级目录
wordpress站群服务 泛解析二级域名 二级目录
  • ¥ 1999.9元
  • 市场价:8999元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: