Javascript 如何使用.ajax（）创建保存按钮

我有两个按钮，编辑和保存。当用户单击“编辑”时，可以访问输入框。如何使“保存”按钮正常工作？也就是说，当用户单击“保存”时，他们键入的文本将更新到数据库中。我有下面的代码，“编辑”按钮可以工作，但当我单击“保存”按钮时，它会消失，“编辑”按钮变得不可访问。请帮忙

JS:

$（“.home”）.html（'Name:EditSave'）；
$（“.edit”）。单击（函数（e）{
$（“#editInput”）.prop（'disabled'，false）；
});
$（“.save”）。单击（函数（e）{
$（this）.closest（'div'）.find（'input'）.attr（'readonly'，'readonly'）；
$（this）.closest（'div'）.find（'.save'）.hide（）；
$（this）.closest（'div'）.find（'.edit'）.show（）；
var inputValue=$（this.closest（'div'）.find（'input'）.val（）；
$.ajax（{URL:https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey",
类型：“POST”，
数据：{inputValue:inputValue}，
成功：功能（数据）{
斯瓦尔（“恭喜”，“你的名字得救了！”，“成功”）；
}
});
});
}

请检查代码中的以下行：

$(this).closest('div').find('input').attr('readonly', 'readonly');

当您单击save按钮时，上面的代码使输入成为只读。因此，编辑按钮似乎变得不可访问（如您的问题中所述）

上面的行隐藏了“保存”按钮

解决方案

更改编辑按钮上单击事件的代码，如下所示：

$(".edit").click(function (e) {

            $("#editInput").prop('disabled',false);

            // Make input accessible
            $("#editInput").prop('readonly', false);

            // Show the save button
            $(".save").show();
        });

$（文档）.ready（函数（）{
$（“.home”）.html（'Name:EditSave'）；
$（“.edit”）。单击（函数（e）{
$（“#editInput”）.prop（'disabled'，false）；
$（“#editInput”）.prop（'readonly'，false）；
$（“.save”）.show（）；
});
$（“.save”）。单击（函数（e）{
$（this）.closest（'div'）.find（'input'）.prop（'disabled'，true）；
$（this）.closest（'div'）.find（'input'）.attr（'readonly'，'readonly'）；
$（this）.closest（'div'）.find（'.save'）.hide（）；
$（this）.closest（'div'）.find（'.edit'）.show（）；
var inputValue=$（this.closest（'div'）.find（'input'）.val（）；
$.ajax（{URL:https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey",
类型：“POST”，
数据：{inputValue:inputValue}，
成功：功能（数据）{
警报（“名称已保存”）；
},
错误：函数（）{
警报（“ajax错误。可能StackOverflow不允许ajax请求”）；
}
});
});
});
请检查代码中的以下行：

$(this).closest('div').find('input').attr('readonly', 'readonly');

当您单击save按钮时，上面的代码使输入成为只读。因此，编辑按钮似乎变得不可访问（如您的问题中所述）

上面的行隐藏了“保存”按钮

解决方案

更改编辑按钮上单击事件的代码，如下所示：

$(".edit").click(function (e) {

            $("#editInput").prop('disabled',false);

            // Make input accessible
            $("#editInput").prop('readonly', false);

            // Show the save button
            $(".save").show();
        });


$（文档）.ready（函数（）{
$（“.home”）.html（'Name:EditSave'）；
$（“.edit”）。单击（函数（e）{
$（“#editInput”）.prop（'disabled'，false）；
$（“#editInput”）.prop（'readonly'，false）；
$（“.save”）.show（）；
});
$（“.save”）。单击（函数（e）{
$（this）.closest（'div'）.find（'input'）.prop（'disabled'，true）；
$（this）.closest（'div'）.find（'input'）.attr（'readonly'，'readonly'）；
$（this）.closest（'div'）.find（'.save'）.hide（）；
$（this）.closest（'div'）.find（'.edit'）.show（）；
var inputValue=$（this.closest（'div'）.find（'input'）.val（）；
$.ajax（{URL:https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey",
类型：“POST”，
数据：{inputValue:inputValue}，
成功：功能（数据）{
警报（“名称已保存”）；
},
错误：函数（）{
警报（“ajax错误。可能StackOverflow不允许ajax请求”）；
}
});
});
});

请修改缩进。请修改缩进。谢谢！！这真的很有帮助。我调整了代码，但当我运行它时，会显示错误警报。我是否需要编写其他代码以显示成功警报？@Hank.Ball如果有帮助，请接受答案。谢谢你！！这真的很有帮助。我调整了代码，但当我运行它时，会显示错误警报。我是否需要编写其他代码以显示成功警报？@Hank.Ball如果有帮助，请接受答案。谢谢