Question

我需要执行两个功能：向数据库添加和删除用户（使用Mongoose）。但是，在执行时，我得到一个200 OK的页面和一个空白的用户名。

ajax调用是否存在问题？

我正在尝试从表单中提取用户输入（用于添加）并进行ajax调用以刷新更新的列表。它的代码如下：

frontend.js

＆＃13;

console.log('Frontend Reached');

$(document).ready(function() {

  /*$(".delete_user").click(function(){
      
  });*/

  var url = '/users/delete_user';
  var user_url = '/users/add_user';


  function load_users(e) {
    $.ajax({
      url: 'userview.ejs',
      dataType: 'text',
      type: 'post',
      ContentType: 'application/x-www-form-urlencoded',
      data: $('#list').serialize(), //$('#user_form').serialize()
      success: function(data, textStatus, jQxhr) {
        $('#list').load('userview.ejs #list');
        //$('#user_form').submit( load_users );
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

    e.preventDefault();
  }




  $('#user_form').on('submit', '#user_form', function(e) {
    e.preventDefault();
    var user_name = $("#nameinput").val();
    var user_age = $("#ageinput").val();

    $.ajax({
      url: 'userview.ejs',
      dataType: 'text',
      type: 'post',
      ContentType: 'application/x-www-form-urlencoded',
      data: {
        'user_name': user_name,
        'user_age': user_age
      },
      success: function(data, textStatus, jQxhr) {

        $('#user_form').submit(load_users);
        load_users();
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

    e.preventDefault();


  }); //onclick



  $(document).on('click', '.delete_user', function(e) {
    e.preventDefault();
    var user_id = $(this).attr('data-id');
    //console.log(user_id);
    var data = {
      user_id: user_id
    };

    $.ajax({
      url: 'userview.ejs',
      dataType: 'text',
      type: 'post',
      ContentType: 'application/x-www-form-urlencoded',
      data: {
        data
      },
      success: function(data, textStatus, jQxhr) {
        //   $('#list').html( data );


        load_users();
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

    e.preventDefault();


  }); //onclick delete

}); //document ready

＆＃13;

userview.ejs

＆＃13;

<meta charset="UTF8">
<link href="javascripts/frontend.js">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/userlist.css">
<link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'>
<html>

<head>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></script>
  <script>
  </script>

  <title>Userlist</title>
  <script src="javascripts/frontend.js"></script>

</head>

<div class="container-fluid">
  <div class="row">
    <h1><strong>FORM</strong></h1>
    <hr id="hr2" style="border: 6px solid palevioletred">
    <div id="black">
      <form class="form-horizontal" method="post" action="/users/add_user" id="user_form">
        <fieldset>


          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Name : </label>
            <div class="col-md-4">
              <input id="nameinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';">

            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Age : </label>
            <div class="col-md-4">
              <input id="ageinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number">

            </div>
          </div>

          <!-- Button -->
          <!-- Button (Double) -->
          <div class="form-group">

            <div class="col-md-8">
              <button id="singlebutton" name="button1id" class="btn btn-success"><b>Add User</b></button>
            </div>
          </div>
      </form>

      <body>

        <h1><strong>USERS</strong></h1>
        <hr id="hr1" style="border: 6px solid #7ec4ec;">
        <ul id="list" class="triangle">


          <!-- Link trigger modal -->


          <!-- Modal -->
          <div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Edit :</h4>
                </div>
                <div class="modal-body">
                  <form>
                    Name:<input type="text" name="modal_username" id="nameId" value="" /> Age:
                    <input type="number" name="modal_age" id="ageId" value="" />
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>






          <% for(var i=0; i<userlist.length; i++) {%>
            <li>
              <%= userlist[i].name %> :
                <%= userlist[i].age %> <a href="#" data-id="<%= userlist[i]._id %>" class="delete_user" title="Delete this User" id="delete">Delete</a> || <a data-toggle="modal" href="#openModal" data-target="#openModal" data-id="<%= userlist[i]._id %>" id="update" title="Update user info"
                    class="update_user">Update</a></li>

            <% } %>
        </ul>
      </body>


      </fieldset>

    </div>
  </div>
</div>

</html>

＆＃13;

这是 userController.js

＆＃13;

var User = require('../models/usermodel.js');
var userService = require('../services/userService');


var userController = {
  add: function(request, response) {
    var user_name = request.body.user_name;
    var user_age = request.body.user_age;

    var newUser = new User({
      name: user_name,
      age: user_age
    });
    console.log(newUser);

    userService.add(newUser, function(err, added) {
      if (err != null) {
        response.send(500);
      } else {
        response.send(200);
      }
    });
  },

  delete: function(request, response) {

    var userId = request.body.user_id;
    userService.delete(userId, function(err, deleted) {
      if (err != null) {
        response.send(500)
      } else {
        response.send(200);
      }
    });
  }
};

module.exports = userController;

＆＃13;

Answer 1

＆＃13;

console.log('Frontend Reached');

$(document).ready(function() {

  var url = '/users/delete_user';
  var user_url = '/users/add_user';

  function load_users() {            
    $.ajax({
      url: 'userview.ejs',
      dataType: 'text',
      type: 'post',                                         
      ContentType: 'application/x-www-form-urlencoded',     //not advisable or use html instead
      data: $('#list').serialize(),                         //it should be refer to form tag
      success: function(data, textStatus, jQxhr) {    
        console.log(data);
        //#list should be the html wrapper to where you load the response data
        $('#list').html(data);                              //view the response in html
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

  }




  $('#user_form').on('submit', '#user_form', function(e) {
    e.preventDefault();
    var user_name = $("#nameinput").val();
    var user_age = $("#ageinput").val();

    $.ajax({
      url: 'userview.ejs',
      dataType: 'text',
      type: 'post',
      ContentType: 'application/x-www-form-urlencoded',
      data: {
        'user_name': user_name,
        'user_age': user_age
      },
      success: function(data, textStatus, jQxhr) {
          load_users();                      
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

    e.preventDefault();


  }); //onclick



  $(document).on('click', '.delete_user', function(e) {
    e.preventDefault();
    var user_id = $(this).attr('data-id');

    $.ajax({
      url: 'userview.ejs',
      dataType: 'json',
      type: 'post',
      ContentType: 'application/x-www-form-urlencoded',
      data: {
        user_id: user_id
      },
      success: function(data, textStatus, jQxhr) {
        load_users();
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.log(errorThrown);
      }
    });

    e.preventDefault();


  }); //onclick delete

}); //document ready

＆＃13;

添加/删除用户后，使用AJAX刷新列表

1 个答案: