1 接口
1.1 get 和 post 的求别
GET
和POST
最本质的区别是规范上的区别:
- 定义
GET
请求是用来获取资源的,也就是进行查询操作的; POST
请求是用来传输实体对象的,因此会使用POST
来进行添加、修改和删除等操作。
1.2 JQuery - Ajax 方法总览
AJAX
是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
方法 | 描述 |
---|---|
$.ajax() | 执行异步AJAX 请求 |
$.get() | 使用AJAX HTTP GET 请求从服务器加载数据 |
$.post() | 使用AJAX HTTP POST 请求从服务器加载数据 |
load() | 从服务器加载数据,并将返回的数据放入所选元素 |
serialize() | 将一组表单元素编码为字符串以便提交 |
2 常用方法
2.1 jQuery - $.ajax() 方法
(1) 定义和用法:$.ajax()
方法用于执行 AJAX
(异步 HTTP
)请求。
所有的 jQuery AJAX
方法都使用 $.ajax()
方法。该方法通常用于其他方法不能完成的请求。
(2) 语法:
$.ajax({name:value, name:value, ... })
(3) 常用参数
名称 | 描述 | 参数类型 |
---|---|---|
async | 表示请求是否异步处理。默认是 true | bool |
type | 规定请求的类型(GET 或 POST ) | string |
dataType | 预期的服务器响应的数据类型,如json | string |
url | 规定发送请求的 URL | string |
data | 规定要发送到服务器的数据 | object |
success | 请求成功时调用此函数 | function |
error | 请求失败时调用此函数 | function |
beforeSend(xhr) | 发送请求前运行的函数 | function |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后) | function |
2.2 举例 - Ajax 和 php 后台交互
现有一个table
表单,根据ajax
返回参数。
页面和Ajax
代码如下:
<script>
function getDataDetail(val){
// 打印 去找bug的方法
//console.log(var);
var score = $(val).parent().siblings().eq(2).text();
$.ajax({
type: 'post',
// dataType: 'json',
url: 'controller.php', // //同目录下的php文件
data:{
score:score
},
beforeSend:function(){
console.log(score);
},
success: function(data) {
var result = (data == 'success') ? "准许" : "不准许";
$(val).parent().siblings().eq(3).text(result);
}
});
}
</script>
<style>
table {
margin: 100px auto;
}
</style>
<body>
<table class="table table-striped w-50 p-3 col-sm-12">
<thead>
<tr>
<th class="col-sm-2"> NO. </th>
<th class="col-sm-2"> User Name </th>
<th class="col-sm-2"> Computer Score</th>
<th class="col-sm-2"> 准许毕业 </th>
<th class="col-sm-2"> 检索成绩 </th>
</tr>
</thead>
<tbody>
<tr>
<th> 1. </th>
<th> Jack </th>
<th> 100 </th>
<th> </th>
<th> <input class="btn btn-primary pull-right btn-left" type="submit" value="Submit" onclick="getDataDetail(this)" > </th>
</tr>
<tr>
<th> 2. </th>
<th> Lisa </th>
<th> 70 </th>
<th> </th>
<th> <input class="btn btn-primary pull-right btn-left" type="submit" value="Submit" onclick="getDataDetail(this)"> </th>
</tr>
<tr>
<th> 3. </th>
<th> Mary </th>
<th> 59 </th>
<th> </th>
<th> <input class="btn btn-primary pull-right btn-right" type="submit" value="Submit" onclick="getDataDetail(this)"> </th>
</tr>
</tbody>
</table>
</body>
controller.php
<?php
$score = $_REQUEST['score'];
$data = ($score >=60) ? "success" : "error";
echo($data);
?>
运行结果是在准许毕业的表单中填充内容。
2.3 ajax中dataType类型详解
2.3.1 关于json的讨论
(1) dataType
为json
类型时
值得注意的是: 这个地方不是json
对象,是json
字符串,从后台返回的参数形式。
依旧参照上述的例子:
首先 先不添加dataType
,dataType
如果不指定,jQuery
将自动根据 HTTP
包 MIME
信息来智能判断。
$.ajax({
type: 'post',
url: 'controller.php',
data:{
userName:userName,
score:score
},
success: function(data) {
console.log(data);
}
});
后台输出 echo($_REQUEST);
打印后,会报错
<b>Notice</b>: Array to string conversion in
这是因为 把数组当成字符串来使用了,解决方案 就是将数组转换成 字符串再使用:比如使用json_encode($arr)
函数。
因此修改代码:
$.ajax({
type: 'post',
dataType: 'json',
url: 'controller.php',
data:{
userName:userName,
score:score
},
success: function(data) {
console.log(data);
}
});
后台代码如下处理:
<?php
$arr = json_encode($_REQUEST);
echo($arr);
?>
运行结果如下:
2.3.2 返回纯文本
dataType:'text'
:返回纯文本字符串。
2.4 form表单传值
2.4.1 概念和使用
除了上述的样例,其实也可以用 form
进行数据传输。
属性介绍
name | 表单名称 |
action | 处理表单提交的 URL |
method | post/get |
例子如下
<body>
<form class="form-horizontal myform" method="get" action="demo.php" id="myform">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputName" placeholder="Name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" >Sign in</button>
</div>
</div>
</form>
</body>
输出 : { ["name"]=> string(4) "Name" ["password"]=> string(9) "123456789" }
上述用的是form
表单直接get
方法传值,实际开发中不建议。
参考文献
[1] Bootstrap设置尺寸大小
[2] 蝴蝶教程