jquery-Ajax
ajax是与服务器交换数据并更新部分网页
获取html中控件,可以采用id获取,控件的值 $("#date").val()
也可以获取name,利用类似这样的语句 $(“input[name=‘date’]”).val() 其中input是input控件类型
而利用layui的form控件来监听,可以通过控件的name来获取控件的value值
<html>
<body>
...省略
<input class="layui-input" placeholder="日期" name="date" id="date" value={$date}>
<input class="layui-input"name="some_name" id="some_name1" value={$some_name}>
<button lay-submit lay-filter='save' class='layui-btn' title='提交'>提交</button>
...省略
</body>
</html>
<script>
"add_date":$("#date").val()//利用获取id=date的值
layui.use(['form','layer','jquery'], function(){
var form = layui.form,
layer = layui.layer;
form.on('submit(save)',
function (data) {
$.ajax({
url: "submit",//url是跳转的控制器的名字,也就是路径
type: "post",
dataType: "json",
data: {//这里的data 默认和html中的控件的中name字段对应,自动获取
"id":data.field.id,
"some_name": data.field.some_name,
"some_word": data.field.some_word,
"add_date":$("#date").val()
"data":data//将整个data传送过去
},
success: function (data){//这里的data是控制器返回的json数据
if (data.code==1) {
layer.alert(data.message, {//通过.去访问这个json的字段对应的值
icon: 6
},function () {
location.reload();//刷新页面,不重载
});
}else if (data.code==2){
layer.alert(data.message, {
icon: 7
});
} else {
layer.alert(data.message, {
icon: 5
});
}
},
error: function (data) {
layer.alert(data.message, {
icon: 5
});
}
});
return false;
});
});
</script>
利用jquery 封装的ajax可以快速处理事件,从而进行增删改查的操作或者跳转到其他的控制器
回调函数
如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
error
在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter
在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
success
当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
complete
当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
jquery 通过url访问到控制器,控制器处理完返回到前端,返回json格式的数据,根据这些数据可以动态变动前端表格数据。