第一次更新(2018.8.3 23:27)
用ajax进行前端和后端php代码的数据交换;
首先用ajax进行前端和后端的数据交换时,要用到jQuery库,链接上jQuery库,代码如下
<script src="jquery-3.3.1.JS"></script>
要注意,如果还要再写js脚本,则必须在下面再写上<script> </script>
然后就要写函数了
首先判断浏览器并根据不同的浏览器来取用不同的方法
代码如下:
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
然后就需要根据html里面的内容进行调用函数
在所调用的函数里,必须先判断先判断服务器是否准备好接受数据
代码如下:
xmlhttp.onreadystatechange=function()
/*onreadystatechange的函数意思为当服务器响应已经做好被处理的准备是做出的响应*/
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)/*readystate的值为4或status为200
时代表服务器可以与之通信*/
{
//这里写自己所需要的代码
}
在自己的函数调用结束后,且在</script>
标签前面,要使用ajax语句来进行与php脚本的通信
代码如下:
xmlhttp.open("GET","登录1.php?q="+str,true);//第一个参数为请求方式
//第二个参数为所传参数php的路径,第三个参数为是否进行异步传输
xmlhttp.send();
特别注意,如果用这种方法调用php文件,切记在表单中的action值一定要设为空值,否则会出现错误
以下是js脚本的完整代码:
<script src="jquery-3.3.1.JS"></script>
<script>
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function showHint(str){
xmlhttp.onreadystatechange=function()
/*onreadystatechange此函数意思为当服务器响应
已经做好被处理的准备是做出的响应*/
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
/*readystate的值为4或status为200
时代表服务器可以与之通信*/
{
$text=xmlhttp.responseText;
alert($text);
}
}
xmlhttp.open("GET","登录1.php?q="+str,true);
xmlhttp.send();
}
</script>
简单来说,就是
- 写出相应的html代码,切记表单中action值为空;
- 调用jQuery脚本,并重新开始script语句;
- 写出不同浏览器下的执行代码;
- 写出自己所需要的函数即调用自己的函数;
在此函数下面要写出
①.服务器已经准备相应的函数
②判断服务器是否可以与之通信,若可以,则进行自己所需要的函数代码,否则。跳出,不执行代码, - 写出ajax语句
到此,js关于ajax的脚本就写完了,剩下的是交给php文件进行处理数据、
php部分
通过?的方式将参数传到php文件中,
首先获取所传参数
代码如下:
$num=$_GET['q'];//这里传入的是q的值,并赋给num
再根据自己的需求写自己的代码
然后向html页面输出结果
首先让$response
获得所需输出结果值;
再通过echo $response
来向html页面输出结果值
完整代码如下:
<?php
$num=$_GET['q'];
$response="$num";
echo $response;
?>
注意这一段php代码必须有头有尾即以<?php
开头,要以?>
结尾;
输出的结果值怎么获取呢?
那就要通过js脚本里的
xmlhttp.responseText;
来获取,即刚刚在php里的$response
,现在
xmlhttp.responseText;
就获取了$response
的值,现在若是想对此值做相关操作,建议把此值赋给一个变量,方便操作。
代码 如下:
$text=xmlhttp.responseText;