thinkphp5学习路程七 ajax使用和实现分页无刷新

meihuasheng

发布于 2021-03-16 21:13:15

1.1K00

代码可运行

文章被收录于专栏：phpcodersphpcoders

运行总次数：0

代码可运行

AJAX的简单了解：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

实现分页无刷新：

open(method,url,async)；

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

string：仅用于 POST 请求将请求发送到服务器。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		function showHint(str){
			if (str.length==0) {
				document.getElementById("textHint").innerHTML="";
				return;
			}
			if(window.XMLHttpRequest)
			{
				//IE7+,firefox,chrome,Opera,Safari 
				xmlhttp=new XMLHttpRequest();
			}
			else
			{
				//IE6,IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if(xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","/studytp5/public/index.php/index/Hello/test?page="+str,true);
			xmlhttp.send();
		}
	</script>
</head>
<body>
	<p><span id="txtHint">默认内容</span></p>	
	<h3>在输入框中输入页码：</h3>
	<form action="">
		跳转到：  <input type="text" name="txt1" onkeyup="showHint(this.value)">
	</form>
</body>
</html>

其中上面的代码是c.html这个文件，随后调用的ajax方法是渲染c.html,而xmlhttp.open中的test方法就是渲染a.html,在此之前a.html文件就是实现的分页；

public function ajax(){ return $this->fetch('c'); }

在这里ajax的另外一种写法如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ajax交互</title>
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script>
   function ajaxPost(){
     var formData = $("#myform").serialize();
     //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法
     $.ajax({
        type:"post",
        url:"{:url('Index/Hello/test2')}",  //数据传输的控制器方法
        data:formData,//这里data传递过去的是序列化以后的字符串
        success:function(data){
           $("#content").append(data);//获取成功以后输出返回值
        }
     });
   }
  </script>
 </head>
 <body>
  <form id="myform">
     <!--这里给表单起个id用于获取表单并序列化-->
     <input type="text" name="account" />
     <input type="password" name="passwd" />
     <button onclick="ajaxPost()">---------</button>
  </form>
  <div id="content">
  </div>
 </body>
</html>