一、ajax的几种形式
1、通过$.ajax方式
$.ajax({
type:"post", //HTTP请求类型
url:"{:url('Index/index/register')}", //数据传输的控制器方法
data:{username:'username',password:'password'}, //传递参数
dataType:'json', //服务器返回json格式数据
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应，根据响应结果，进行数据处理；
...
},
error:function(data){
//异常处理；
console.log(data);
}
});
2、$.post() 方法是对 $.ajax 的一个简化方法，直接使用POST请求方式向服务器发送数据，代码更为简洁，如下：
$.post("{:url('Index/index/register')}",{
username:'username',
password:'password'
},function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
}, 'json'
);
3、$.get() 方法和 $.post() 方法类似，只不过是直接使用GET请求方式向服务器发送数据
$.get("{:url('Index/index/register')}",{
category:'news'
},function(data){
//获得服务器响应
...
},'json'
);
4、如上 $.get() 方法和如下 $.ajax() 方法效果是一致的：
$.ajax({
type:'get',//HTTP请求类型
url:"{:url('Index/index/register')}",
data:{category:'news'},
dataType:'json',//服务器返回json格式数据
success:function(data){
//获得服务器响应
...
}
});
5、$.getJSON() 方法是在 $.get() 方法基础上的更进一步简化，限定返回json格式的数据，其它参数和 $.get() 方法一致
$.getJSON("{:url('Index/index/register')}",{category:'news'},function(data){
//获得服务器响应
...
}
);
二、ajax的几种应用场景
1、前端渲染页面、点击事件以及处理方法
{volist name="list" id="vo"}
<tr>
<td align="center">{$vo.id}</td>
<td align="center">{$vo.username}</td>
<td align="center">
<a href="" class="btn btn-primary btn-sm shiny">
<i class="fa fa-edit"></i> 编辑
</a>
// 当id为1时，不显示删除标签
{if condition="$vo.id neq 1"}
<a href="javascript:void(0)" onClick="warning($vo['id'],$vo['username'])" class="btn btn-danger">
<i class="fa fa-trash-o"></i>删除
</a>
{/if}
</td>
</tr>
{/volist}
<script type="text/javascript">
function warning(id,username){
$.ajax({
type:"post",
url:"{:url('Index/index/test')}",
data: {'id':id,'username':username},
success:function(data){
//获得服务器响应做数据处理
...
}
});
}
</script>
2、ajax 上传图片(这里前端框架是MUI)
<form class="mui-input-group">
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__upload">
<i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
<input multiple="multiple" type="file" accept="image/*" class="van-uploader__input" />
</div>
<div class="van-uploader__preview" style="display: none;">
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;">
<img class="van-image__img" style="object-fit: cover;">
</div>
<i class="van-icon van-icon-clear van-uploader__preview-delete"></i>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$('.van-uploader__input').change(function () {
var formData = new FormData();
formData.append("file", this.files[0]);
$.ajax({
type: "post",
url: "{:url('Task/upload')}",
data: formData,
dataType: 'json',
cache:false,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (res) {
// console.log(res);
if (res.code == 200) {
$('.van-uploader__upload').hide();
$('.van-uploader__preview').show();
$('.van-image__img').attr('src', res.url);
$('#imageUrl').val(res.path);
} else {
mui.toast(res.msg, {duration: 'short', type: 'div'});
}
}
})
})
</script>
注意：文件上传必须用FormData对象，是必须
processData参数设置为false阻止jquery把参数序列化为字符串
contentType设置为false避免jquery对其进行操作
3、ajax 序列化提交表单(这里前端框架是MUI)—serialize()
<form class="mui-input-group" id="formData">
<div class="mui-card">
<div class="mui-card-header mui-badge-warning mui-badge-inverted">粉丝基础信息</div>
<div class="mui-card-content">
<div class="mui-table-view-cell flexItems">
<label><span class="mui-badge mui-badge-danger mui-badge-inverted">*</span>买手编号</label>
<span class="full">
<input type="text" name="number" id="number" placeholder="请填写粉丝编号">
</span>
</div>
<div class="mui-table-view-cell flexItems">
<label><span class="mui-badge mui-badge-danger mui-badge-inverted">*</span>真实姓名</label>
<span class="full">
<input type="text" name="name" id="name" placeholder="请填写真实姓名">
</span>
</div>
<div class="mui-table-view-cell flexItems">
<label><span class="mui-badge mui-badge-danger mui-badge-inverted">*</span>手机号码</label>
<span class="full">
<input type="text" name="mobile" id="mobile" placeholder="请填写手机号码" maxlength="11" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
</span>
</div>
<div class="mui-table-view-cell flexItems">
<label><span class="mui-badge mui-badge-danger mui-badge-inverted">*</span>QQ号码</label>
<span class="full">
<input type="text" name="qq" id="qq" placeholder="请填写QQ号码" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
</span>
</div>
</div>
</div>
<div class="mui-card">
<div class="btn-full mui-btn mui-btn-primary">确定提交</div>
<!-- <button type="button" class="btn-full mui-btn mui-btn-primary">确定提交</button> -->
</div>
</form>
<script type="text/javascript">
$(".mui-btn-primary").click(function(){
// 第一种提交方式
$.ajax({
type: "post",
url: "{:url('Fans/ajaxPostAdd')}",
data: $("#formData").serialize(),
success: function(e){
//服务器返回响应，根据响应结果，分析是否请求成功；
if(e.code == 200){
mui.toast(e.msg, {duration: 'short', type: 'div'});
setTimeout(()=>{
window.location.href = "{:url('Fans/index')}";
}, 1500)
}else{
mui.toast(e.msg, {duration: 'short', type: 'div'});
}
},
error : function() {
mui.toast("网络异常！", {duration: 'short', type: 'div'});
}
});
// 第二种提交方式
$.post("{:url('Fans/ajaxPostAdd')}", $("#formData").serialize(), function(e){
//服务器返回响应，根据响应结果，分析是否请求成功；
if(e.code == 200){
mui.toast(e.msg, {duration: 'short', type: 'div'});
setTimeout(() => {
window.location.href = "{:url('Fans/index')}";
}, 1500)
}else{
mui.toast(e.msg, {duration: 'short', type: 'div'});
}
},'json');
})
</script>
TP5 url链接带参的常用写法
window.location.href = "{:url('Fans/index', ['id' => 1])}";
window.location.href='{:url("Index/detail")}?id=' + 1;
注意：H5序列化提交表单，form表单内不能用button作为提交按钮，否则无法提交，在form表单外可以用button提交
扫一扫
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
