模拟ajax无刷新提交的4种方法

前端之家收集整理的这篇文章主要介绍了模拟ajax无刷新提交的4种方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在web开发领域,自从有了ajax技术,使得数据的异步提交变得非常方便快捷;那么在没有ajax技术之前,我们该怎样实现ajax的无刷新效果呢。

本文主要以"人物投票"的功能为例,来讲述如何轻松的模拟出无刷新效果

首先我们需要创建这么几个文件

  • index.html,负责前台的展示(包括人物的照片和一个投票的按钮);
  • tp.PHP,负责接收数据,处理数据;
  • count.txt,负责存放数据(票数)的空文本,在实际开发中大家可以将数据存放在数据库中,前台需要的时候可以从数据库提取

实现的方法:

  • 第一种使用204状态码的特性,实现只提交但"不做任何反应的效果"。此方法只需要在后台文件中这样设置http头部:"http/1.1 204 No Content",而前台文件几乎不需要做任何特殊处理。
    index.html:
    <p><img src="./1.jpg" style="width: 200px;height: 300px;"></p>
    <p><a href="tp.PHP"><button>投票</button></a></p>
    tp.PHP:
    $count=file_get_contents("./count.txt");
    $count+=1;
    file_put_contents("./count.txt",$count);
    header('http/1.1 204 No Content');
    当我们点击一次投票按钮时count.txt文件显示"1",而页面并没有刷新:
    count.text:
  • 第二种:在前台页面中嵌入一个隐藏的iframe,后台文件只需要处理数据就行了,这种比较简单相信大家都懂。
    index.html:
    <p><img src="./1.jpg" style="width: 200px;height: 300px;"></p>
    <p><a href="tp.PHP" target="count_data"><button>投票</button></a></p>
    <iframe name="count_data" style="display: none;"></iframe>
    tp.PHP:
    $count=file_get_contents("./count.txt");
    $count+=1;
    file_put_contents("./count.txt",$count);
    当我们再一次点击一次投票按钮时count.txt文件显示"2",而页面并没有刷新:
    count.txt:
  • 第三种:利用img的src来向后台发送请求。相信大家都知道,当我们向后台请求一张图片的时候(<img src="imgURL"/>),页面并不需要刷新,但是我们需要的图片却顺利的得到了。此处将利用这一特性,将img的src属性值设置为一个PHP文件来实现请求发送成功但不刷新页面效果
    index.html:
    <p><img src="./1.jpg" style="width: 200px;height: 300px;"></p>
    <p><button id="sub" onclick="tj()">投票</button></p>
    <script>
    	function tj(){
    		var img=document.createElement('img');
    		img.setAttribute('src','tp.PHP');//向tp.PHP发送请求
    	}
    </script>
    tp.PHP:
    $count=file_get_contents("./count.txt");
    $count+=1;
    file_put_contents("./count.txt",$count);
    当我们再一次点击一次投票按钮时count.txt文件显示"3",而页面并没有刷新:
  • 第四种:利用css(link),javascript等元素的src属性,所利用的原理和第三种方法大致相同,此处就不再多加赘述,大家自行测试。
原文链接:https://www.f2er.com/ajax/162197.html

猜你在找的Ajax相关文章