jQuery嘗試打印選中了復選框的表的列，然后打印來自Web服務器的響應

Question

我正在嘗試使用JQuery創建URL，並且遇到一個小問題。 我正在將表格打印到頁面上，如下所示：

   <table id="employeeTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Branch</th>
                <th>Phone No.</th>
                <th>Extension</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var prod in Model)
            {
                <tr>
                    <td>@prod.FullName</td>
                    <td>@prod.Branch</td>
                    <td>@prod.PhoneNo</td>
                    <td>@prod.Extension</td>
                    <td>@prod.Email</td>
                    @if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
                    {
                        <td><a href="/home/edit/@prod.Id"  style="color: blue;">edit</a></td>
                    }
                    else
                    {
                        <td>User => @User.ToString()</td>   
                    }
                    <td>
                        <input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
                    </td>
                </tr>
            }
        </tbody>
    </table>

然后，在下面的表格中，我要求用戶輸入一些值：

@{if (IsPost) {
      string ua = Request["u"];
      string pa = Request["p"];
      string ma = Request["m"]; 
    <p>You entered: </p>
    <p>Company Name: @ua </p>
    <p>Contact Name: @pa </p>
    <p>Contact Name: @ma </p>
    <p>It should appear here, but it won't =></p>
    <p id="out"></p>
  }
  else
  {
    <form method="post" runat="server" id="FormID">
        Username:<br />
        <input type="text" name="u" id="u" /><br />
        Password<br />
        <input type="text" name="p" id="p" /><br />
        <br />
        Password<br />
        <textarea name="m" id="m" cols="25" rows="5">
        Enter your comments here...
        </textarea><br>
        <br />
        <input type="submit" value="Submit" class="submit" id="thebutton" />
    </form>
}

我想用我的JQuery構造一個URL，導航到它並在屏幕上打印響應-使用表中復選框和表單中的值，因此在我的腳本中，我有：

<script>
    $("#thebutton").click(function () {
        $('#out').text('');
        var form = $(document.getElementById('FormID'));
        var urlToConstruct = 'http://webaddress.com/web/d.php';
        urlToConstruct += '?u=' + form.find('#u').val();
        urlToConstruct += '&p=' + form.find('#p').val();
        $('#employeeTable tr').has(':checkbox:checked').find('td:eq(2)').each(function () {
            urlToConstruct += ($(this).text());
        });
        alert(urlToConstruct);
    });
</script>

我要從此表單構造的URL是：

http://webaddress.com/web/d.php?u=<Username entered by user>&p=<Password entered by user>&s=<List of Phone Numbers from the C# above where the checkbox is selected, comma separated>&m=<Comment submitted by user>

因此，如果我的名字是“ John”，密碼是“ Password1”，評論是“ Test”，並且我為電話號碼為“ 12345678”的用戶選擇了一個復選框，那么我將導航到的URL是：

http://webaddress.com/web/d.php?u=John&p=Password1&s=12345678&m=Test

理想情況下，如果可能的話，我想在同一父頁面上打印該頁面的響應，而不是轉到新頁面。

所以，我的問題-

• 我該如何修復上面的JQuery，以便它使用正確的URL構造出alert() ？
• 當我在div中單擊“提交”時，如何在不離開父級的情況下顯示來自服務器的響應
  現場？

更新：

這真讓我抓狂 ：）。 我嘗試刪除警報，只是查看在提琴手中創建的URL。 JQuery工作的表單部分； 表部分只是拒絕。

更新＃2：

劇本：

<script>
    $("#thebutton").click(function () {
        evt.preventDefault();
        var $form = $('#FormID');
        var urlToConstruct = 'http://webaddress.com/web/d.php';
        urlToConstruct += '?u=' + $form.find('#u').val();
        urlToConstruct += '&p=' + $form.find('#p').val();

        var phoneNumbers =
            $.map($('#employeeTable').find('input:checked')
                    .parent()
                    .siblings('.js-phoneNumbers'),
                  function (elem, index) {
                      return $(elem).text();
                  });

        urlToConstruct += 's=' + phoneNumbers.join(',');

        alert(urlToConstruct);
        form.submit();
    });
</script>

HTML：

    <table id="employeeTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Branch</th>
                <th>Phone No.</th>
                <th>Extension</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var prod in Model)
            {
                <tr>
                    <td>@prod.FullName</td>
                    <td>@prod.Branch</td>
                    <td class="js-phoneNumbers">@prod.PhoneNo</td>
                    <td>@prod.Extension</td>
                    <td>@prod.Email</td>
                    @if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
                    {
                        <td><a href="/home/edit/@prod.Id"  style="color: blue;">edit</a></td>
                    }
                    else
                    {
                        <td>User => @User.ToString()</td>   
                    }
                    <td>
                        <input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
                    </td>
                </tr>
            }
        </tbody>
    </table>

仍然沒有警報對話框:(

Answer 1

var form = $(document.getElementById('FormID'));

1. 我在您的標記中看不到ID為FormID的元素。
2. 為什么選擇document.getElementById('FormID') ？ 由於您已經包含了jQuery，因此只需使用var form = $('#FormID');

如果您可以使用適當的標記來更新您的問題，我可以為您提供進一步的幫助。

另一個想法是，您的點擊處理程序附在表單的submit按鈕上。 意思是，瀏覽器在單擊該按鈕時執行的默認操作是提交表單。 如果您仍然希望顯式提交表單，則可能需要如下修改您的點擊處理程序：

$("#thebutton").click(function(evt) {
    evt.preventDefault();
    // rest of the code as before
    ...
    ...
});

第三個想法，您可以按如下方式重組標記和js，

<table id="employeeTable">
    <thead>
        // markup as before
    </thead>
    <tbody>
        @foreach (var prod in Model)
        {
            <tr>
                // markup as before
                <td class="js-phoneNumbers">@prod.PhoneNo</td>
                // markup as before
            </tr>
        }
    </tbody>
</table>


$("#thebutton").click(function(evt) {
    evt.preventDefault();

    var $form = $('#FormID');
    var urlToConstruct = 'http://webaddress.com/web/d.php';
    urlToConstruct += '?u=' + $form.find('#u').val();
    urlToConstruct += '&p=' + $form.find('#p').val();

    var phoneNumbers = 
        $.map($('#employeeTable').find('input:checked')
                .parent()
                .siblings('.js-phoneNumbers'),
              function (elem, index){
                  return $(elem).text();
              });

    urlToConstruct += 's=' + phoneNumbers.join(',');

    alert(urlToConstruct);
    form.submit();
});

我們感興趣的td ，我給了它一個特定的類js-phoneNumbers 。 js前綴向讀者傳達了該類主要是通過js使用，而不是用於樣式。

然后，單擊處理程序將使用此類而不是魔術的td:eq(2) 。 我覺得用這種方式可以更清楚地傳達意圖。

$.map用於將jquery元素數組轉換為字符串數組（即電話號碼）。

您以前必須構造url的phonenumber部分的代碼是錯誤的。 沒有將&s=巧妙地添加到該網址中，並且電話號碼也沒有以逗號分隔。