AJAX开发技术在PHP开发中的简单应用技巧

2019-09-14 07:16:57丽君
//将链接改为:
<a href="#" onClick="getNews(1)">新闻1</a>

//并且设置一个接收新闻的层,并且设置为不显示:
<div id="show_news"></div>

  同时构造相应的JavaScript函数:

function getNews(newsID)
{
 //如果没有把参数newsID传进来
 if (typeof(newsID) == 'undefined')
 {
  return false;
 }
 //需要进行Ajax的URL地址
 var url = "/show.php?id="+ newsID;

 //获取新闻显示层的位置
 var show = document.getElementById("show_news");

 //实例化Ajax对象
 var ajax = InitAjax();

 //使用Get方式进行请求
 ajax.open("GET", url, true);

 //获取执行状态
 ajax.onreadystatechange = function() {
  //如果执行是状态正常,那么就把返回的内容赋值给上面指定的层
  if (ajax.readyState == 4 && ajax.status == 200) {
   show.innerHTML = ajax.responseText;
  }
 }
 //发送空
 ajax.send(null);
}

那么当,当用户点击“新闻1”这个链接的时候,在下面对应的层将显示获取的内容,而且页面没有任何刷新。当然,我们上面省略了show.php这个文件,我们只是假设show.php文件存在,并且能够正常工作的从数据库中把id为1的新闻提取出来。

这种方式适应于页面中任何元素,包括表单等等,其实在应用中,对表单的操作是比较多的,针对表单,更多使用的是POST方式,这个下面将讲述。

3. 使用POST方式

其实POST方式跟Get方式是比较类似的,只是在执行Ajax的时候稍有不同,我们简单讲述一下。

假设有一个用户输入资料的表单,我们在无刷新的情况下把用户资料保存到数据库中,同时给用户一个成功的提示。

//构建一个表单,表单中不需要action、method之类的属性,全部由ajax来搞定了。
<form name="user_info">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />

<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
//构建一个接受返回信息的层:
<div id="msg"></div>

我们看到上面的form表单里没有需要提交目标等信息,并且提交按钮的类型也只是button,那么所有操作都是靠onClick事件中的 saveUserInfo()函数来执行了。我们描述一下这个函数: