剖析ajax
2018-06-22 04:56:10来源：未知 阅读 ()
学过javascript和接触过后端PHP语言必然要用到ajax,这是必学的一门学科,AJAX指的是Asynchronous JavaScript and XML,它使用XMLHttpRequest对象来与服务端脚本交流。请求方式，分为GET与POST： GET 最为常见的HTTP请求，普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后，以问号开始。
它可以发送和接收不同格式的信息，包括JSON，XML，HTML，AJAX最吸引人的特点是它的”async(异步)的本质，它意味着它可以做所有这些事情而不需要刷新页面。这使得你 可以基于用户事件只更新页面的一部分。AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 而异步则这个AJAX代码运行中的时候其他代码一样可以运行。 jquery的async:false,这个属性 默认是true：异步，false：同步。
<html>
<head>
<meta charset = utf-8>
<link rel="stylesheet" type="text/css" href = "bootstrap.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<!--布局-->
<div class = "container"> <!--容器-->
<div class = "panel panel-default"> <!--面板-->
<div class = "panel panel-heading">
<h1>1409D学生信息</h1>
</div>
<div class="panel panel-body">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="select"> <!--下垃选项-->
<option value="">请选择根据什么查询</option>
<option value="name">姓名查询</option>
<option value="sex">性别查询</option>
<option value="age">年龄查询</option>
<option value="tel">电话查询</option>
<option value="addr">市场部查询</option>
</select> <!--输入框-->
<input type="text" id = "textname" class="form-control" placeholder="请输入查询内容">
<button class="btn btn-info" id="find">查询</button>
<button class="btn btn-link" id="all">显示所有</button>
</div>
</div>
<table class="table table-holder"> <!--表格-->
<thead> <!--表头-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>市场部</th>
</tr>
</thead>
<tbody></tbody> <!--内容主题-->
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
show(null,null); //先默认为空值
$("#find").click(function () { //点击查找事件调用方法
var select = $("#select").val(); //定义变量接收下拉选项
var textname = $("#textname").val(); //定义变量接收文本框的值
show(select,textname);
})
$("#all").click(function () { //点击all显视全部调用函数
show(null,null); //默认显示为空值
$("#all").val(""); //赋空值
$("#all option").eq(0).prop("selected",true); //给all按键为下拉选项第一个值
})
})
function show(select,textname) { //show函数传参
$.ajax({
url:"show.php", //地址文件路径
data:{"select":select,"name":textname}, //数据传递参数
dataType:"json", //数据类型为json
success:function (data) { //成功时传参
var tr=""; //定义变量
$.each(data,function (key,value) { //循环传递的键值
tr+="<tr><td>"+value[1]+"</td><td>"+value[2]+"</td><td>"+value[3]+"</td><td>"+value[4]+"</td><td>"+value[5]+"</td></tr>";
})
$("tbody").html(tr); //替换每一行
},
error:function () { //失败时提示失败
alert('失败')
}
})
}
</script>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- php判断是否为json格式的方法 2020-02-24
- 详解PHP+AJAX无刷新分页实现方法 2019-12-20
- PHP中判断AJAX提交的数据的方法 2019-09-23
- ThinkPHP内置的ThinkAjax实现异步传输技术的操作步骤 2019-08-23
- 通过实例深入剖析require和include的用法 2019-06-21
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
