Question

我试图将表单插入到MySql数据库中，而数据库确实将表单存储在for中。它不会刷新页面上显示的表格，只有当我重新启动服务器并再次访问该页面时，才会看到条目。

此外，我在req.send（＆＃39; null＆＃39;）的行上得到res.send不是函数类型错误。

插入的客户端ASync ajax侦听器

 document.getElementById('addExerciseButton').addEventListener('click',function(event){      //Add listener to addExerciseButton

var addExercise = document.getElementById("addExercise");
var request = new XMLHttpRequest();
//sets the query URL for the DB interactions
var holder ="exercise="+addExercise.elements.exercise.value+"&reps="+addExercise.elements.reps.value+"&weight="+addExercise.elements.weight.value+"&date="+addExercise.elements.date.value;

if(addExercise.elements.lbsOr.checked){
  holder += "&lbsOr=1";                                     //bool check again
}
else{
  holder += "&lbsOr=0";
}

request.open("GET", "/insert?" + holder, true);                 //Open the get request for asynchronous with the holder url packed
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

request.addEventListener('load', function(){
  if(request.status >= 200 && request.status < 400){
    var response = JSON.parse(request.responseText);
    var id = response.inserted;

     //prepping for table fill
    var table = document.getElementById("exerciseTable");
    var row = table.insertRow(1);

    //creating cells and appending them to the rows to match the headers
    var exerName = document.createElement('td');
    exerName.textContent = document.getElementById('exercise').value;
    row.appendChild(exerName);


    var repCount = document.createElement('td');
    repCount.textContent = document.getElementById('reps').value;
    row.appendChild(repCount);


    var weightAmount = document.createElement('td');
    weightAmount.textContent = document.getElementById('weight').value;
    row.appendChild(weightAmount);


    var completion = document.createElement('td');
    completion.textContent = document.getElementById('date').value;
    row.appendChild(completion);

    var unitChecker = document.createElement('td');
    if(addExercise.elements.lbsOr.checked){                 //once again the bool strikes comparing, you guessed it, lbs or kg
      unitChecker.textContent = "lbs";
    }
    else{
      unitChecker.textContent = "kg";
    }
    row.appendChild(unitChecker);
    //adding the up date and delete buttons with DOM for each row
    var yupDate = document.createElement('td');
    var updateDataLink = document.createElement('a');
    updateDataLink.setAttribute('href','/entryEdit?id=' + id);
    var updateButton = document.createElement('input');

    updateButton.setAttribute('value','Edit');
    updateButton.setAttribute('type','button');
    updateDataLink.appendChild(updateButton);
    yupDate.appendChild(updateDataLink);
    row.appendChild(yupDate);


    var deleteCell = document.createElement('td');
    var deleteButton = document.createElement('input');
    deleteButton.setAttribute('type','button');
    deleteButton.setAttribute('name','delete');
    deleteButton.setAttribute('value','Delete');
    deleteButton.setAttribute('onClick', 'deleteData("dataTable",' + id +')');//calls deleteData function with ID as a param

    var deleteHidden = document.createElement('input');
    deleteHidden.setAttribute('type','hidden'); //those hidden attributes though
    deleteHidden.setAttribute('id', 'delete' + id);
    deleteCell.appendChild(deleteButton);
    deleteCell.appendChild(deleteHidden);
    row.appendChild(deleteCell);

  }
  else {
      console.log("error");

  }
  });
 request.send(null);
event.preventDefault();  //no refreshes!
  });

服务器端数据库操作代码

  app.get('/insert',function(req,res,next){
  var context = {};
   pool.query("INSERT INTO `workouts` (`name`, `reps`, `weight`, `date`, `lbs`) VALUES (?, ?, ?, ?, ?)",
    [req.query.exercise,
    req.query.reps,
    req.query.weight,
    req.query.date,
    req.query.lbsOr],
    function(err, res){
        if(err){
          next(err);
          return;
        }
        context.inserted = res.insertId;
        res.send(JSON.stringify(context));
  });
});

Html代码

    <h1>Please add an exercise!</h1>

<form id="addExercise">
    Exercise:
    <input type="text" name="exercise" id="exercise"><br>
    Reps:
    <input type="number" name="reps" id="reps "min="1"><br>
    Weight:
    <input type="number" name="weight" id="weight "min="1"><br>
    Date:
    <input type="date" name="date" id="date"><br>
    Check for Lbs:
    <input type="checkbox" name="lbsOr" id="lbsOr"><br>
    <input type="submit" name="Add Exercise" value = "Add Exercise" id="addExerciseButton">
</form><br>
<!-- table with permanent headers and then parses the "results " that get passed to this page by one of the many functions-->
<table id="exerciseTable">
    <tr>
        <th>Name</th>
        <th>Reps</th>
        <th>Weight</th>
        <th>Date</th>
        <th>Unit</th>
        <th>Update</th>
        <th>Delete</th>
    </tr>

    {{#if results}}
        {{#each results}}
            <tr>
                <td>{{this.name}}</td>
                <td>{{this.reps}}</td>
                <td>{{this.weight}}</td>
                <td>{{this.date}}</td>
                <td>{{this.lbs}}</td>
                <td><a href="/entryEdit?id={{this.id}}"><input type="button" value="Update"></a></td>
                <td>
                    <input type="button" name="delete" value="Delete" onClick="deleteData('dataTable',{{this.id}})">
                    <input type="hidden" id="delete{{this.id}}">
                </td>
            </tr>
        {{/each}}
    {{/if}}
</table>

<script src="./java.js"></script>

非常感谢任何帮助，如果你们需要更多代码，请告诉我，我是整个Stack溢出事件的新手。

Answer 1

我解决了！

` function(err, res){
        if(err){
          next(err);
          return;
        }
        context.inserted = res.insertId;
        res.send(JSON.stringify(context));
  });`

应该是'

 ` function(err, result){
        if(err){
          next(err);
          return;
        }
        context.inserted = result.insertId;
        res.send(JSON.stringify(context));
  });`

我是双重定义res，这会抛出错误。

req.send（＆＃39; null＆＃39;）不是函数Node.js mySQl

1 个答案: