在ajax PUT请求中苦苦挣扎

时间:2014-08-25 13:07:56

标签: javascript jquery ajax express

编辑:一旦我将$(this).attr(' red')传递给变量,就不再获得未定义的URI。仍然得到500 Server错误。

编辑:Here is all the code on github(以防万一我错过了什么!)

编辑:这是在global.js中调用函数的方式

$('#userList table tbody').on('click', 'td a.linkedituser', editUser);

这是html。

<div id="wrapper">
    <div id="userInfo">
      <h2>User Info</h2>

      <p><strong>Name:</strong> <span id='userInfoName'></span><br />
      <strong>Age:</strong> <span id='userInfoAge'></span><br />
      <strong>Gender:</strong> <span id='userInfoGender'></span><br />
      <strong>Location:</strong> <span id='userInfoLocation'></span></p>
    </div>

    <h2>User List</h2>

    <div id="userList">
      <table>
        <thead>
          <tr>
            <th>UserName</th>

            <th>Email</th>

            <th>Delete</th>

            <th>Edit</th>
          </tr>
        </thead>
      </table>
    </div>

    <h2>Edit User</h2>

    <div id="editUser">
      <fieldset>
        <input id="editUserName" type="text" placeholder="Username" /><input id=
        "editUserEmail" type="text" placeholder="Email" /><br />
        <input id="editUserFullname" type="text" placeholder="Full Name" /><input id=
        "editUserAge" type="text" placeholder="Age" /><br />
        <input id="editUserLocation" type="text" placeholder="Location" /><input id=
        "editUserGender" type="text" placeholder="Gender" /><br />
        <button id="btnEditUser">Edit User</button>
      </fieldset>
    </div>
</div>

我正在尝试提交表单作为PUT请求来编辑用户的信息。

我在提交表单时在Chrome控制台中收到以下错误。

[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (undefined, line 0)

错误的权利显示ID很好,所以我想这与路由器端有关?

http://localhost:3000/users/edituser/53fa0acbc069f52257312d2c

这是我的客户端功能。

function editUser(event) {

event.preventDefault();

var thisUserID = $(this).attr('rel');
var arrayPosition = userListData.map(function(arrayItem) { return arrayItem._id;    }).indexOf(thisUserID);

var thisUserObject = userListData[arrayPosition];

$('#editUserName').val(thisUserObject.email);
$('#editUserEmail').val(thisUserObject.email);
$('#editUserFullname').val(thisUserObject.fullname);
$('#editUserAge').val(thisUserObject.age);
$('#editUserLocation').val(thisUserObject.location);
$('#editUserGender').val(thisUserObject.gender);

var editUser = {
  'username' : $('#editUserName').val(),
  'email' : $('#editUserEmail').val(),
  'fullname' : $('#editUserFullname').val(),
  'age' : $('#editUserAge').val(),
  'location' : $('#editUserLocation').val(),
  'gender' : $('#editUserGender').val(),
}

//just a test to prove that I can read the id from the db
$('body > h1').text($(this).attr('rel'));

$('#btnEditUser').on('click', function() {
  $.ajax({
    type: 'PUT',
    url: '/users/edituser/' + thisUserID,
    data: JSON.stringify(editUser),
    dataType: 'json',
    success: function(msg) { alert('Success'); },
    error: function(err) {alert('Error'); }
  }).done(function(response) {
    if (response.msg === '') {
    }
    else {
      alert('Error: ' + response.msg);
    } 
    populateTable();
  });
});
};

这是我在/routes/users.js内的服务器端的路由器。

router.put('/edituser/:id', function(req, res) {
    var db = req.db;
    var userToEdit = req.params('id');

    db.collection('userlist').findById(userToEdit, function(err, result) {
        res.send((result === 1) ? { msg: '' } : { msg: 'error: ' + err });
    });
});

有人可以帮忙吗?谢谢!

2 个答案:

答案 0 :(得分:1)

当你在网址中时,你正在从身体中拉出id

因此请将var userToEdit = req.body.id;替换为:

var userToEdit = req.params.id;

或者您可以使用通过all the methodsreq.param('id')来查找值。

也可以res.json(..)代替res.send(..)

答案 1 :(得分:0)

我设法解决了关于&#34; undefined&#34;的问题。 URI通过将$(this).attr(&#39; rel&#39;)发送到变量中,以便可以从提交点击事件中检索它。

我仍然遇到问题,但会发现一个新的问题,因为已经发生了很大变化。