我有一个适用于本地存储的应用程序，但我想使用JSON将其数据保存到SQL数据库（例如server = https://myserver.com with user = myuser，password = mypass），是否可以请帮助我，请在下面找到我的代码：
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-stye" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch- icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- Add your site or application content here -->
<div class="wrapper">
<header>
<hgroup>
<h1>iPad Web Application Development</h1>
</hgroup>
</header>
<nav>
<ul id="tab-bar" class="page-spots">
<li id="tab-spots">
<a href="../index.html">Images</a>
</li>
<li id="tab-sighting">
<a href="../video/index.html">Video</a>
</li>
<li id="tab-stars">
<a href="../data/index.html">Database</a>
</li>
</ul>
</nav>
<h1>Contacts</h1>
<table id="contacts-table">
<tr id="contacts-head">
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Info</th>
<th>Actions</th>
</tr>
</table>
<form id="contacts-form" action="#" method="post" onSubmit="">
<div class="item text">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" required /></div>
</div>
<div class="item text">
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" required/></div>
</div>
<div class="item text">
<label>Email:</label>
<div class="field"><input type="text" name="email" required/></div>
</div>
<div class="item text">
<label>Information:</label>
<div class="field"><textarea rows="7" cols="30" name="information" required></textarea></div>
</div>
<div class="button-wrapper">
<div class="item button">
<div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>
</div>
<div class="item button button-default">
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<footer>
<p>Stereo Vision Web Application © 2014</p>
</footer>
</div>
<script src="../js/vendor/zepto.min.js"></script>
<script src="../js/helper.js"></script>
<script src="../js/app.js"></script>
<script src="../js/video.js"></script>
<script src="../js/main.js"></script>
<script src="../js/data.js"></script>
<script src="../js/server.js"></script>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script scr="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.5-min.js"></script>
</body>
</html>
JAVASCRIPT CODE
var Contacts = {
index: window.localStorage.getItem("Contacts:index"),
$table: document.getElementById("contacts-table"),
$form: document.getElementById("contacts-form"),
$button_save: document.getElementById("contacts-op-save"),
$button_discard: document.getElementById("contacts-op-discard"),
init: function() {
// initialize the storage index
if (navigator.onLine) {
//code
document.body.style.background="white";
}else{
document.body.style.background="#c0c0c0";
}
if (!Contacts.index) {
window.localStorage.setItem("Contacts:index", Contacts.index = 1);
}
// initialize the form
Contacts.$form.reset();
Contacts.$button_discard.addEventListener("click", function(event) {
Contacts.$form.reset();
Contacts.$form.id_entry.value = 0;
}, true);
Contacts.$form.addEventListener("submit", function(event) {
var entry = {
id: parseInt(this.id_entry.value),
first_name: this.first_name.value,
last_name: this.last_name.value,
email: this.email.value,
information: this.information.value
};
if (entry.id == 0) { // add
Contacts.storeAdd(entry);
Contacts.tableAdd(entry);
}
else { // edit
Contacts.storeEdit(entry);
Contacts.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
}, true);
// initialize the table
if (window.localStorage.length - 1) {
var contacts_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/Contacts:\d+/.test(key)) {
contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (contacts_list.length) {
contacts_list
.sort(function(a, b) {
return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
})
.forEach(Contacts.tableAdd);
}
}
Contacts.$table.addEventListener("click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
Contacts.$form.first_name.value = entry.first_name;
Contacts.$form.last_name.value = entry.last_name;
Contacts.$form.email.value = entry.email;
Contacts.$form.information.value = entry.information;
Contacts.$form.id_entry.value = entry.id;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
Contacts.storeRemove(entry);
Contacts.tableRemove(entry);
}
}
event.preventDefault();
}
}, true);
},
storeAdd: function(entry) {
entry.id = Contacts.index;
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
window.localStorage.setItem("Contacts:index", ++Contacts.index);
},
storeEdit: function(entry) {
window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
},
storeRemove: function(entry) {
window.localStorage.removeItem("Contacts:"+ entry.id);
},
tableAdd: function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute("id", "entry-"+ entry.id);
Contacts.$table.appendChild($tr);
},
tableEdit: function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML = "";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove: function(entry) {
Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
}
};
Contacts.init();