Question

我有一个public_page.php页面和一个action.php页面。如果用户按下public_page.php中的提交按钮，它会通过jquery post方法将信息发送到action.php页面。成功处理后，action.php页面发送一个tr数据，应该在public_page.php表中替换。

page: public_page.php
<div id="result"></div>
<table>
 <thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
 <tbody>
    <tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
    <tr id="5"><td>1</td><td>Mr.Y</td><td>USA</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>
    <tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
 </tbody>
</table>

jquery代码（没有$（document）.ready line here）：

$("body").on("click",".edit",function(event){
  event.preventDefault();
  var url = 'action.php';
  var trid = $(this).closest('tr').attr('id');
    $.post(url,
    {
      trid: trid,
    },function(data){
        $("#result").html(data).show();
    });
});

之后表行的数据进入'#result'div进行编辑。让。 tr id = 5（Mr.Y）现在正在编辑中。所以这里有#result div，如下所示：

<div id="result">
<form id="5000">
Name:<input type="text" name="name" value="Mr.Y" /><br />
Address:<input type="text" name="adrs" value="USA" /><br />
Mobile:<input type="text" name="mobile" value="123856641" /><br />
Age:<input type="text" name="age" value="30" /><br />
<input type="submit" value="Submit" />
</form>
</div>

现在，当用户编辑信息并按提交时，它会通过jquery将表单信息发送到action.php页面。什么在做action.php页面，在获取trid（实际上是要编辑的数据库行的id）之后，它处理数据并为public_page.php生成回调数据，如下所示：

page: action.php
echo '<div class="success_msg">Data Updated Successfully!</div>';
echo '<div class="trid">5</div>';
echo '<div class="trcontent"><tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr></div>';

和public_page.php的jquery代码处理这样的数据：

   var url = 'action.php';
    var id = $(this).closest('form').attr('id');
    var form_id = "#"+id ;
    var data = $(form_id).serializeArray();
    $.post(url,
      data,function(callbackdata){
        var msg = $(callbackdata).filter(".success_msg").html();
        var trid = $(callbackdata).filter(".trid").html();
        var trdata = $(callbackdata).filter(".trcontent").html();
        $("#result").html(msg).show();
        $('#'+trid).replaceWith(trdata);
    });

根据查询代码，它应该替换id为5的tr。但是虽然它正在替换tr而不是表格格式，但它正在替换为这样的文本格式：

page: public_page.php
<div id="result"></div>
<table>
 <thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
 <tbody>
    <tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
    1Mr.YTokeyo123856641<a class="edit" href="">Edit</a>
    <tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
 </tbody>
</table>

我认为......不会插入替换数据。

如何解决此问题，以便在替换tr id =“5”后看起来像一个表行，而不是一个字符串。

Answer 1

我建议进行编辑，以更简单的方式解决这个问题。

在你的php代码中，你应该返回的是数据而不是返回div。

<?php
$data = new stdClass();
$data->successMsg = 'Data Updated Successfully!';
$data->trid = 5;
$data->trContent = '<tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>';

echo json_encode($data);

然后在您的JS代码中，您可以直接访问数据，而不是从HTML中过滤它。

$.post(url,
      data,
      function(callbackdata){
        var msg = callbackdata.successMsg;
        var trid = callbackdata.trid;
        var trdata = callbackdata.trContent;
        $("#result").html(msg).show();
        $('#'+trid).replaceWith(trdata);
      }, 
      'json');

您遇到问题的原因是jQuery处理无效HTML的方式。 <div><tr><td>1</td><td>2</td></tr></div>无效。

$('<div><tr><td>1</td><td>2</td></tr></div>').html() // outputs `12`

表tr未按预期正确替换

1 个答案: