JS学习笔记（三）:HTML通过ajax请求获取并显示php中的内容

最新推荐文章于 2021-01-18 02:25:02 发布

汤圆学Java

最新推荐文章于 2021-01-18 02:25:02 发布

阅读量1.3k

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/jalon2015/article/details/46560067

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

总共2个文件：

1、text.html

<script>
    var xmlHttp=new XMLHttpRequest();//定义一个http请求，这里没有检测是否成功和是否支持
    var str='';//用来存放输入框的内容
    function show()
    {
        str=document.getElementById('input').value;//获取输入框的内容
        var url='http://jalon2015.sinaapp.com/loginCheck.php';//远程连接到服务器上的php文件
        url=url+'?p='+str;//添加p参数，用来传到php文件中
       /*  下面的open()只是初始化，做好准备发送，
           send()才是发送请求。
           AJAX是异步的，也就是说，它不是等上一步执行完再去执行下一步，从服务端去处理的时候，它是不会等服务端处理完，返回值回来，再去执行下面的代码的。
           当服务器执行完后，返回来的结果，由回调函数来处理，下面的这个回调函数就是：stateChange（）
           它会根据状态的值来处理。状态的值为4表示从服务端已处理完成了。status为200表示处理成功了，没有问题。
      */
        xmlHttp.onreadystatechange=stateChanged ;//就是状态改变时执行 stateChanged 函数
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);                
    }
    function stateChanged()
    {
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
         {
         document.getElementById("show").innerHTML=xmlHttp.responseText;
         }
    }
</script>

<body>
    <div class="mui-content-padded">
    <input id='input' type="text" placeholder="普通输入框">
    <button id="button" οnclick="show()" >显示按钮</button>
    show:<span id="show"></span>

</body>

2、loginCheck.php

<?php
$a=array('zhao','qian','sun','li');
$p=$_GET['p'];
$show='';
if(strlen($p)>0)
{

	for($i=0;$i<count($a);$i++)
	{
		if(strtolower($p)==strtolower(substr($a[$i],0,strlen($p))))
		{
			$show=$a[$i];
		}
	}
	
}
if($show=='')
{
	$response='no show';
}
else
	{
		$response=$show;
	}
echo $response;