jquery ajax异步保存数据

最新推荐文章于 2021-08-06 18:01:30 发布

qwbtc

最新推荐文章于 2021-08-06 18:01:30 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/qwbtc/article/details/51206304

版权

本文演示如何利用jQuery的AJAX功能实现异步保存数据。通过监听input元素的focus和blur事件，当输入框失去焦点时触发PUT请求，将更新的数据发送到服务器。在服务器端，接收并更新数据，然后通过success回调刷新页面。

摘要由CSDN通过智能技术生成

通过jquery .ajax函数异步保存数据

实际例子:

_form.html.erb中:

对input接受的数据进行保存，传data-id自定义属性的意思是保存f.id的值，以便jquery的.ajax函数的url属性时候用到

app.js中:

$(".edit_position").focus(function(){
$(this).css("background-color","#FFFFCC");
});

$(".edit_position").blur(function(){
$(this).css("background-color","#D6D6FF");

var rooms_subject_id = $(this).attr("data-id");
$.ajax({
type: 'put',
url: '/manage/rooms_subjects/'+ rooms_subject_id,
cache: false,
data:{
position: $(this).val()
},