javascript - 使用 $.ajax() 获取动态 值

Question

我有一个 $.ajax() 请求正常工作，但我需要获取 的 4 个值(名称、clientid、url、id)。 $.val() 不起作用，因为它只适用于输入。

我需要从动态附加的行中获取名称、客户端 Id 、 url 和 id 。我需要这些值，因此当我单击所选行的编辑按钮时，它会保存我所做的更改。

我应该如何获取该值？与$.html()？ $.text()?

HTML

<div class="row">
            <div class="col-md-12 overflow-table">
                    <table class="table" id="table">
                    <thead class="head-color thead-inverse">
                        <tr>
                            <th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
                            <th>CLIENT-ID</th>
                            <th>URL</th>
                            <th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
                        </tr>
                    </thead>

                    <tbody id='table-redirect'>
                        <tr class='lightgrey'>
                        </tr>
                        <tr class='lightgrey'>
                        </tr>
                        <tr class='lightgrey'>
                        </tr>
                        <tr class='lightgrey'>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

JavaScript:

            //change table content
        $(document).on('click', '#editButton', function(e) {
            var url = "http://mobisteinlp.com/redirect/redirect";
            var name = $('#name1').val();
            console.log(name);
            var clientId = $('#client_id1').val();
            console.log(clientId);
            var redirectUrl = $('#url1').html();
            console.log(redirectUrl);
            var id = $('#hidden').val()
            console.log(id);
            var formData = new FormData();
            formData.append('name1', name);
            formData.append('client_id1', clientId);
            formData.append('url1', redirectUrl);
            formData.append('id', id);
            console.log('test');
            $.ajax({
                url: url + "/editRedirect",
                type: "POST",
                dataType: "json",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function(obj) {
                    var name, clientId, redirectUrl, id;
                    var rows = '';
                    $("tbody").empty('');
                    for (i = 0; i < obj.length; i++) {
                        rows += "<tr class='lightgrey'><th contenteditable='true'>" + obj[i].name + "</th><td>" + obj[i].client_id + "</td><td contenteditable='true' >" + obj[i].url + "</td><td><button type='button' id='editButton' class='btn btn-info'" + obj[i].client_id + "'><img class='col-md-2 edit nopad float-right' src='http://mobisteinlp.com/redirect/public/img/edit.svg'></button><a href='http://mobisteinlp.com/redirect/public/click.php/?id='" + obj[i].id + "'><img class='col-md-2 link nopad float-right' src='http://mobisteinlp.com/redirect/public/img/copy.svg'></a></td></td></tr>";
                        console.log('sucess!');
                        console.log(obj);
                    }
                    $("#table").append(rows);
                },
                error: function() {
                    console.log('error');
                }
            }); //END /editRedirect $.ajax()
        }); //END $(document).on('click','#change',function(e)

Answer 1

.text()方法将仅返回元素内的文本。

.html()方法将返回文本以及元素中可能包含的任何 HTML。

例如如果您<td>由于某种原因看起来像这样:

<th class="clientID"><span>12345</span></th>

然后:

$(".clientID").text();将返回12345

$(".clientID").html();将返回<span>12345</span>

因此，出于您的目的，您应该使用 .text()获取要发送到服务器的实际文本内容。

您也可以通过自己的测试轻松地在 jQuery 文档中检查所有这些内容。

现在，要获取特定单击的行中的值，您需要通过标记中的行上下文进行限制。在“点击”事件中，this将是被单击的按钮，位于 <tr> 内。对应的数据也在<tr>内.

所以你可以使用<tr>作为包含按钮和数据的最近元素。那么如果你给每个 <td>正如我上面所做的，与它所代表的内容(客户端 ID、url 等)相对应的类，您可以执行以下操作:

var tr = $(this).closest("tr"); //get the parent tr
var clientID = tr.find(".clientID").text(); //get the client ID text within the tr
var url = tr.find(".url").text(); //same for url, etc...

最后，您的按钮点击将无法正常工作，因为您复制了 ID。它只适用于第一个按钮。

更改<button type='button' id='editButton' class='btn btn-info'至<button type='button' class='btn btn-info editButton' (使用类而不是 id)

并更改$(document).on('click', '#editButton', function(e) {至$(document).on('click', '.editButton', function(e) { (简单地说， # 更改为 . )