Javascript 如何使用ajax为Mysql表添加值

我已经编写了一段代码，使用ajax将值插入到数据库表中。如果您看到下图，这些值将显示在文本框中，当按下“添加区域”按钮时，这些值必须添加到表格中

图片：

从图像中收集X、Y、W和H的值，单击“添加区域”按钮时，应在表中插入X、Y、W和H的值

index.php：

<table>
          <tr>
          <div class="actions">

          <input type="button" id="btnView" value="Display areas" class="actionOn" />

          <input type="button" id="btnReset" value="Reset" class="actionOn" />
          <input type="button" id="btn_add" value="add areas" class="actionOn" />


        </div>
        <br>
        <div id="output" class='output'> </div>
</table>
          <p>X:<input type= "text" id="x" name ="x" value="-">
          <p>Y:<input type= "text" id="y" name ="y" value="-">
          <p>W:<input type= "text" id="w" name ="w" value="-">
          <p>H:<input type= "text" id="h" name ="h" value="-">


  <script>
  var selectionExists;

  function areaToString (area) {
      document.getElementById('x').value = area.x;
      document.getElementById('y').value = area.y;

      document.getElementById('w').value = area.width;
      document.getElementById('h').value = area.height;

    return (typeof area.id === "undefined" ? "" : (area.id + ": ")) + area.x + ':' + area.y  + ' ' + area.width + 'x' + area.height + '<br />'
  }


  $('#btn_add').click(function(){
    var x_value= document.getElementById('x').value;
    var y_value= document.getElementById('y').value;
    var w_value= document.getElementById('w').value;
    var h_value= document.getElementById('h').value;
    $.ajax({
                      type:'POST',
                      url: 'server.php',
                      data:{
                        'x_value': x_value,
                        'y_value': y_value,
                        'w_value': w_value,
                        'h_value': h_value
                      },
                      success: function(data){
                        alert("x:" + x_value +"y:" +y_value+"w:" +w_value+"h:" +h_value);
                      }
  });
});

  function output (text) {
    $('#output').html(text);
  }

  // Log the quantity of selections
  function debugQtyAreas (event, id, areas) {
    console.log(areas.length + " areas", arguments);
  };

  // Display areas coordinates in a div
  function displayAreas (areas) {
    var text = "";
    $.each(areas, function (id, area) {
      text += areaToString(area);
    });
    output(text);
  };
  </script>

X:
Y:
W:
H:
var选择存在；
功能区域到字符串（区域）{
document.getElementById（'x'）。value=area.x；
document.getElementById（'y'）。value=area.y；
document.getElementById（'w'）。值=面积.width；
document.getElementById（'h'）。值=面积。高度；
返回（typeof area.id==“未定义”？：（area.id+“：”））+area.x+：“+area.y+”+area.width+“x”+area.height+”

}
$（'#btn_add'）。单击（函数（）{
var x_value=document.getElementById（'x'）.value；
var y_value=document.getElementById（'y'）.value；
var w_value=document.getElementById（'w'）.value；
var h_value=document.getElementById（'h'）.value；
$.ajax({
类型：'POST'，
url:'server.php'，
数据：{
“x_值”：x_值，
“y值”：y值，
“w_值”：w_值，
“h_值”：h_值
},
成功：功能（数据）{
警报（“x:+x_值+”y:+y_值+”w:+w_值+”h:+h_值）；
}
});
});
函数输出（文本）{
$（'#output'）.html（文本）；
}
//记录选择的数量
函数debugqtyreas（事件、id、区域）{
console.log（areas.length+“areas”，参数）；
};
//在div中显示区域坐标
功能显示区域（区域）{
var text=“”；
$。每个（区域、功能（id、区域）{
text+=区域字符串（区域）；
});
输出（文本）；
};

Server.php：

  <?php
    session_start();
    $db = mysqli_connect('localhost', 'root', '', 'project_focus');
    if(isset($_POST['x_value'])){
    $x= $_POST['x_value'];
    $valid="SELECT * FROM sample";
    $validdb=mysqli_query($db, $valid);
    while (mysqli_fetch_array($validdb)){
    $add_x= "INSERT INTO sample (x_value) VALUES ($x)";
    mysqli_query($db, $add_x);
    }
      }
     ?>

数据库表名为sample，其字段为id、x_值、y_值、w、h

---

php是我试图使用mysql查询将值插入表中的文件。但是当我运行代码时，输出没有实现。插入值无效。我想我在这个问题上犯了一些错误。但是我想不出来。有人能帮我解决这个问题吗。

是否尝试删除while子句

您不需要先查询数据库才能进行插入。只要执行connect和insert命令就可以了

确保表中的其他列不是必需的，并且被设置为默认NULL，以便查询不会在insert中未设置的其他列上出错

$add_x= "INSERT INTO sample (x_value) VALUES ($x)";
mysqli_query($db, $add_x);

---

HTML、CSS和JavaScript应该更像

//{
get=（url、成功、上下文）=>{
const x=新的XMLHttpRequest；
常数c=上下文| | x；
x、 打开（'GET'，url）；
x、 onload=（）=>{
if（success）success.call（c，JSON.parse（x.responseText））；
}
x、 send（）；
}
post=函数（url、发送、成功、上下文）{
const x=新的XMLHttpRequest；
常数c=上下文| | x；
x、 打开（'POST'，url）；
x、 onload=（）=>{
if（success）success.call（c，JSON.parse（x.responseText））；
}
if（typeof send=='object'&&send&！（数组的发送实例））{
if（发送FormData的实例）{
x、 发送（send）；
}
否则{
const fd=新表单数据；
for（让k输入发送）{
append（k，JSON.stringify（send[k]）；
}
x、 发送（fd）；
}
}
否则{
抛出新错误（“发送参数必须是对象”）；
}
返回x；
}
doc=document；htm=doc.documentElement；bod=doc.body；nav=navigator；M=tag=>doc.createElement（tag）；I=id=>doc.getElementById（id）；
mobile=nav.userAgent.match（/Mobi/i）？真：假；
S=（选择器，在范围内）=>{
var w=在| | doc内；
返回w.querySelector（选择器）；
}
Q=（选择器，内部）=>{
var w=在| | doc内；
返回w.querySelectorAll（选择器）；
}
aC=函数（）{
常量a=[].slice.call（参数），n=a.shift（）；
n、 添加（…a）；
返回aC；
}
rC=函数（）{
常量a=[].slice.call（参数），n=a.shift（）；
n、 类列表。删除（…a）；
返回rC；
}
tC=函数（）{
常量a=[].slice.call（参数），n=a.shift（）；
n、 切换（…a）；
返回tC；
}
洗牌=数组=>{
设a=array.slice（），i=a.length，n，h；
而(i){
n=Math.floor（Math.random（）*i--）；h=a[i]；a[i]=a[n]；a[n]=h；
}
返回a；
}
兰德=（最小值，最大值）=>{
设mn=min，mx=max；
如果（mx==未定义）{
mx=mn；mn=0；
}
返回mn+Math.floor（Math.random（）*（mx mn+1））；
}
//下面的魔法
常数x=I（'x'）、y=I（'y'）、w=I（'w'）、h=I（'h'）、display=I（'display'）；
常量重置=I（'reset'）、添加=I（'add'）、错误=I（'error'）；
函数valid（）{
设xv=x.value，yv=y.value，wv=w.value，hv=h.value；
如果（xv==''|isNaN（xv）| isNaN（yv）| wv==''|isNaN（wv）| hv==''|isNaN（hv））{
error.textContent='无效数字'；
返回false；
}
error.textContent=''；返回true；
}
x、 oninput=y.oninput=w.oninput=h.oninput=（）=>{
有效（）；
}
display.onclick=（）=>{
const fd=new FormData；fd.append（'get_xwh'，true）；
post（'xywh.php'，fd，data=>{
output.innerHTML=''；
data.xywh.forEach（o=>{
const sect=M（'div'）、sx=M（'div'）、sy=M（'div'）、sw=M（'div'）；
常数sh=M（'div'）；
sx.textContent='X:'+o.X；sy.textContent='Y:'+o.Y；
sw.textContent='W:'+o.W；sh.textContent='H:'+o.H；sect.appendChild（sx）；
附录儿童组（sy）；附录儿童组（sw）；附录儿童组（sh）；
输出。追加子项（sect）；
});
});
}
reset.onclick=（）=>{
x、 value=y.value=0；w.value=h.value=1；error.textConte