html php ajax请求,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的值。

名称

*

注意：名称是唯一的，请勿重复，否则数据库会插入数据失败！

别名

*

注意：别名是唯一的，请勿重复，否则数据库会插入数据失败！

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

}

二、后端：ajax.php

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

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

var_dump($_POST);

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

index.php

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

}

}