由于今天项目要求需要判断提交的数据数据库是否已存在?为了用户体能友好,又要求不能刷新页面。我只好用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>
2021年09月17日 10:50:05 沙发
好