Javascript 使用mysql存储的数据加载/安全html表单

我构建了一个简单的html/js数学表单，其中包含一些计算。 为了简化事情，我缩短了表格以便于理解：

函数输出（）{
var value1=document.getElementById（'value1'）.value；
var value2=document.getElementById（'value2'）.value；
var value3=document.getElementById（'value3'）.value；
document.getElementById（'result1'）.innerHTML=（parseInt（value1）+parseInt（value2））*parseInt（value3）；
}

简单加法
加载保存取消






标题：






+ 
* 
结果：

Javasrcipt是一种客户端语言，它不会与MySQL服务器通信。 可能的解决方案是在客户端使用AJAX调用，通过后端PHP方法保存数据

这是Save方法的唯一答案。负载与此类似，但应该使用“GET”而不是“POST”

AJAX调用：

<button onclick="Save();">Save</button>

<script>
function Save()
{

var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
var value3 = document.getElementById('value3').value;
var value4 = document.getElementById('title').value;
var inputsAndResult= [value1, value2, value3, title ];

$.ajax({
url     : 'YOUR_URL',
method    : 'POST',
data :{
 arrayData:inputsAndResult
},
success   : function(response)
{
alert("succes");
},
error : function(e)
{
alert("error")
}
});
}
</script>

保存
函数Save（）
{
var value1=document.getElementById（'value1'）.value；
var value2=document.getElementById（'value2'）.value；
var value3=document.getElementById（'value3'）.value；
var value4=document.getElementById（'title'）。值；
var inputsAndResult=[value1、value2、value3、title]；
$.ajax({
url:“你的url”，
方法：“POST”，
数据：{
arrayData:输入和结果
},
成功：功能（响应）
{
警惕（“成功”）；
},
错误：函数（e）
{
警报（“错误”）
}
});
}

在后端端：

  <?php
$server = "localhost";
$db = "myDB";

$conn = mysqli_connect($server, $db);

$sql = "INSERT INTO MyGuests ( number1, number2, result, name ])
VALUES ($_POST[dataArray[0]], $_POST[dataArray[1]], $_POST[dataArray[2]], $_POST[dataArray[3]])";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

    mysqli_close($conn);
    ?>

这些页面很好地掌握了所有这些东西的基本知识，比如AJAX、PHP、数据库发布

PHP:

阿贾克斯：

AJAX发布到MySQL：