用百度map api展示时空数据（四）--ajax的实现

最新推荐文章于 2023-11-09 08:33:28 发布

两鬓已不能斑白

最新推荐文章于 2023-11-09 08:33:28 发布

阅读量757

点赞数

分类专栏： BMap 文章标签： ajax php thinkphp js

本文链接：https://blog.csdn.net/u010429424/article/details/42986225

版权

BMap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在我浅显的知识里，ajax就是无刷新的服务器端和前端的交互方式，使用ajax可以使数据像水流一样一段一段从服务器端传递到前端。以往的网站是通过刷新来完成服务器和前端交互的，我们经常看到的空白页或者页面“闪”了一下就说明网页刷新了。ajax并不高大上，实现起来非常方便。有多种方式可以实现ajax。

1.php+JS

最原始的方式，直接编写php代码用于服务器端，JS用于前端。举个小例子吧：

在HTML里有这么一行代码<a href="#" οnclick="test()">测试ajax</a>，这是一个超链接标签，当点击这个超链接标签时，执行JS中的test()函数。

该函数代码如下：

function test(){

   var xmlHttp;
   function xmlhttprequest(){//针对不同浏览器
       if(window.ActiveXObject){
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
       }else if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest();
   }
}
//发送ajax请求
xmlhttprequest();
xmlHttp.open("GET","http://127.0.0.1/gisproject/home/Lib/Action/test.php?",true);//使用GET方式，还可以用POST方式
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
     if(xmlHttp.status == 200){
          alert(xmlHttp.responseText);
     }
}else{
     alert("错误!");
}
xmlHttp.send(null);
}

发送ajax请求到test.php，test.php代码可以简单写为：

<?php
echo "test";
?>

当ajax返回成功时，xmlHttp.responseText就是”test“，我们可以alert(xmlHttp.responseText)一下进行测试。在我们写此类ajax的js代码，我习惯于经常

alert(xmlHttp.readyState)和alert(xmlHttp.status)来判断服务器是否正确处理ajax请求。

2.thinkphp+JQ实现ajax

<form method="POST" id="search_form" action="__URL__/gis_keyword_search">
 搜索框：<input type="text" name="giskeyword" placeholder="请输入关键字"/>
<input type="submit" value="搜索"/>
</form>

通过form表单进行提交，将表单提交到gis_keyword_search函数，其中__URL__/gis_keyword_search是一种thinkphp的路径表示。

然后在gis_keyword_search函数中通过$this->ajaxReturn($point_array,'查询成功',1);以ajax无刷新的方式返回数据。

$(function(){
    $('#search_form').ajaxForm({
       success:  complete,  // post-submit callback
       dataType: 'json'
    });
    function complete(data){
       if (data.status==1){
            alert(data.data);
       }else{
            $('#result').html(data.info).show();
       }
    }
});

3.thinkajax

详见点击打开链接