0

我正在尝试使用 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 以便它alert()使用正确的 URL 构造？
  • 当我在 div 中单击提交时，如何在不离开父
    站点的情况下显示来自服务器的响应？

更新 ：

这真让我抓狂 ：）。我试过删除警报并简单地查看在 fiddler 中创建的 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>

仍然没有警报对话框:(

4

1 回答 1

1

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

  1. FormID我在您的标记中没有看到带有 id 的元素。
  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)。我觉得这种方式表达的意图更清楚。

用于将$.mapjquery 元素数组转换为字符串数组（即电话号码）。

您之前必须构建 url 的电话号码部分的代码是错误的。Cheifly&s=没有添加到 url 中，电话号码没有逗号分隔。

于 2013-07-24T16:15:19.663 回答