如何使用jquery Ajax更新表行?

时间:2016-11-26 10:28:05

标签: jquery ajax

我有一个包含两个按钮的表,用户可以选择批准或拒绝。我使用jQuery .post()方法用这个信息更新一个mysql数据库,一切正常。目前,php只是回复了一个文本响应。

现在我想在单击按钮后使用ajax刷新表中的状态字段。我不确定最好的办法。是应该从服务器端使用jQuery .get()获取表,还是只更新状态字段?

表格

-- Configuring done
-- Generating done
-- Build files have been written to: /home/mjgalindo/ClionProjects/ThreadTest/cmake-build-debug
[ 33%] Building CXX object CMakeFiles/ThreadTest.dir/main.cpp.o
[ 66%] Building CXX object CMakeFiles/ThreadTest.dir/foo.cpp.o
In file included from /usr/include/c++/6/thread:39:0,
                 from /home/mjgalindo/ClionProjects/ThreadTest/foo.cpp:3:
/usr/include/c++/6/functional: In instantiation of ‘struct std::_Bind_simple<std::_Mem_fn<void (Foo::*)(unsigned int, unsigned int, std::vector<unsigned int>&)>(Foo*, unsigned int, unsigned int, std::reference_wrapper<std::vector<int> >)>’:
/usr/include/c++/6/thread:137:26:   required from ‘std::thread::thread(_Callable&&, _Args&& ...) [with _Callable = void (Foo::*)(unsigned int, unsigned int, std::vector<unsigned int>&); _Args = {Foo*, unsigned int&, unsigned int&, std::reference_wrapper<std::vector<int, std::allocator<int> > >}]’
/home/mjgalindo/ClionProjects/ThreadTest/foo.cpp:15:89:   required from here
/usr/include/c++/6/functional:1374:61: error: no type named ‘type’ in ‘class std::result_of<std::_Mem_fn<void (Foo::*)(unsigned int, unsigned int, std::vector<unsigned int>&)>(Foo*, unsigned int, unsigned int, std::reference_wrapper<std::vector<int> >)>’
       typedef typename result_of<_Callable(_Args...)>::type result_type;
                                                             ^~~~~~~~~~~
/usr/include/c++/6/functional:1395:9: error: no type named ‘type’ in ‘class std::result_of<std::_Mem_fn<void (Foo::*)(unsigned int, unsigned int, std::vector<unsigned int>&)>(Foo*, unsigned int, unsigned int, std::reference_wrapper<std::vector<int> >)>’
         _M_invoke(_Index_tuple<_Indices...>)
         ^~~~~~~~~
CMakeFiles/ThreadTest.dir/build.make:86: recipe for target 'CMakeFiles/ThreadTest.dir/foo.cpp.o' failed
make[3]: *** [CMakeFiles/ThreadTest.dir/foo.cpp.o] Error 1
CMakeFiles/Makefile2:67: recipe for target 'CMakeFiles/ThreadTest.dir/all' failed
make[2]: *** [CMakeFiles/ThreadTest.dir/all] Error 2
CMakeFiles/Makefile2:79: recipe for target 'CMakeFiles/ThreadTest.dir/rule' failed
make[1]: *** [CMakeFiles/ThreadTest.dir/rule] Error 2
Makefile:118: recipe for target 'ThreadTest' failed
make: *** [ThreadTest] Error 2

jQuery

**Username  Status              Change Status** 
Anderson    no          (decline button)  (Add button)
julian      yes         (decline button)  (Add button)

html表和表单

$(document).ready(function() {
$("#myForm2").submit( function(e) { //If add btn pressed
    e.preventDefault();
    var id = this.id;


    var url = "process_ajax6.php";

    var formdata = $(this).serialize();
    formdata += "&btn=btn_add"; // added the btn
    $.post(url, formdata,
        function(data) {

            $("#results").html(data); //Response

        });
});

$("#myForm1").submit( function(e) { //If add btn pressed
    e.preventDefault();
    var id = this.id;
    var url = "process_ajax6.php";

    var formdata = $(this).serialize();
    formdata += "&btn=btn_remove"; // added the btn
    $.post(url, formdata,
        function(data) {

            $("#results").html(data); //Response
        });
  });

}); 

php

echo "<tr>
<td>
<a href=\"profile.php?user_id=".$collab_userid." \" 
 <span class=\"label label-default\" id=\"tag\">".$collab_username."</span></a>
</td>
<td>
".$status."
</td>

<td>
<form id=\"myForm1\" class=\"myForm1\" action=\"\" method=\"post\"   enctype=\"multipart/form-data\">
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." />
<input type=\"hidden\" name=\"id\" value=".$upload_id." />

  <button  type=\"submit\" id=\"btn_remove\" class=\"btn_remove\" name= \"btn_remove\">Remove</button>

</form>
</td>
<td>
<form id=\"myForm2\" class=\"myForm2\" action=\"\" method=\"post\"   enctype=\"multipart/form-data\">
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." />
<input type=\"hidden\" name=\"id\" value=".$upload_id." />

  <button  type=\"submit\" id=\"btn_add\" class=\"btn_add\" name= \"btn_add\">Add</button>

</form>
</td>

</tr>";

}
"</tbody>
</table>";

2 个答案:

答案 0 :(得分:1)

在表格中为您的状态字段设置ID,如下所示:

<td id='status_1'>
 ".$status."
</td>

当你得到一些文字时,如果你得到一些文字,你可以改变状态字段的html值,如下所示:

$.post(url, formdata,
    function(data) {
        $("#status_1").html('Yes'); //Response
    });

});

答案 1 :(得分:1)

我建议从服务器传回新状态以响应更新查询,并使用它来更新$ .post回调中前端的状态。

最快的方法 - 将回复状态添加为dom-element:

echo "<answer><h1>user declined</h1></answer><status>$status</status>;

并在$ .post中回调访问收到的数据,如下所示:

$("#results").html($(data).find('answer').html()); //Response
$("#whatever").html($(data).find('status').html()); //Status

你应该用smth标记状态td来访问它