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>
ajax会用,看得懂就好啦,其实也没有想象的那么难~~~
具体参考 https://www.runoob.com/ajax/ajax-tutorial.html