ajax调用未正确发送数据

Question

There is something wrong with the way I am using the ajax call.

When I place the ajax call inside the block, it executes the error function in the ajax callback. When the ajax call is moved outside the block, the variable subcate passed to server is undefined.

var that = this;
var subCate ='' ;
var tr = $('#tbl').find('tr');

//My block
tr.bind('click', function(event) {
    var values = '';
    tr.removeClass('highlight');
    var tds = $(this).addClass('highlight').find('td');
    subCate = tds.find('#myid').text();
    alert(subCate);


      //Tried moving it out of the block but not much of help
        $.ajax({
            url: '/playground',
            type: 'POST',
            data: { id: subCate},
            success: function(data){
                alert("Sub category recvd");
                console.log("successs");
            },
            error: function(jqXHR){
                console.log("failed");
                alert("failed");
            }
        });
    });

    //Ajax call moved here

Here is the node.js server code :

  app.post('/playground', function(req, res) {
        debug("Inside post(/playground) ",req.body.id);
        res.send('ok', 200);
    });

Hi Here is the snippet of HTML table, that will give an idea what the jquery code is doing

<div id="category-container">
      <div id="category-form">
        <h1></h1>
        <p id="sub1" class="subheading">Select a category</p>
        <!--hr-->
        <div style="margin:20px" class="container">
          <table id="tbl" class="table table-bordered table-striped">
            <thead>
              <tr>
                <!--th(style='width:40px') #-->
                <th style="width:180px">Name</th>
                <th style="width:200px">Location</th>
                <th style="width:180px">Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div id="myid"><a id="item" href="/playground/:0">Electronics</a></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div id="myid"><a id="item" href="/playground/:1">Real Estate</a></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

Thanks in advance guys !

Answer 1

Add event.preventDefault() at the top of your bind.

Also, I recommend changing the event binding to the following:

$('#tbl').on('click', 'tr', function(event) {
  event.preventDefault();
  // your code
});