<h1>编辑NTP配置文件</h1> <hr> <button id = "openBtn">打开文件</button> <button id = "saveBtn">保存</button> <br><br> <textarea id="fileContent" cols="80" rows="30"></textarea> <script> $("#openBtn").click(function(){ $.ajax({ url:"ntp1.php", type:"GET", success:function(response){ var fc = response; $("#fileContent").val(fc); } }); }); $("#saveBtn").click(function(){ var fileContent = $("#fileContent").val(); $.ajax({ url:"ntp1.php", type:"POST", data:{content:fileContent}, success:function(response){ alert("File saved successfully!"); } }); }); </script> 优化代码
时间: 2024-02-10 10:06:02 浏览: 130
HTML参考手册
对于这段代码,可以将 HTML 和 JavaScript 部分分离,提高代码可读性和维护性。同时,也可以将 Ajax 请求的 url 和 type 参数提取出来,方便维护。
HTML 部分:
```
<h1>编辑NTP配置文件</h1>
<hr>
<button id="openBtn">打开文件</button>
<button id="saveBtn">保存</button>
<br><br>
<textarea id="fileContent" cols="80" rows="30"></textarea>
```
JavaScript 部分:
```
var url = "ntp1.php";
var type = "GET";
function getFileContent() {
$.ajax({
url: url,
type: type,
success: function(response) {
var fc = response;
$("#fileContent").val(fc);
}
});
}
function saveFile() {
var fileContent = $("#fileContent").val();
$.ajax({
url: url,
type: "POST",
data: { content: fileContent },
success: function(response) {
alert("File saved successfully!");
}
});
}
$(document).ready(function() {
$("#openBtn").click(function() {
getFileContent();
});
$("#saveBtn").click(function() {
saveFile();
});
});
```
优化后的代码将 Ajax 请求的 url 和 type 参数提取出来,方便维护。同时,使用 `$(document).ready()` 函数来确保页面加载完成后再执行 JavaScript 代码,避免出现未定义的错误。
阅读全文