Question

我试图找出为什么我在使用我的ajax代码发布时得到的结果。

正如您所看到的，在我的表单中的大多数内容中，我使用[]或onchange="mySubmit(this.form)"来提交带有ajax的表单，因此这适用于输入元素，它返回所有正确的div和东西进入我的div应该显示返回的所有数据。

但是，在onclick="mySubmit(this.form)"底部的<li>我也有form，但它不起作用，它出于某种原因显示我的整个页面内部div会显示我的数据，这非常奇怪，我可以用onclick="mySubmit(this.form)"以任何其他方式发布onclick吗？

HTML 代码：

<li>

JS Ajax代码：

        <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
            onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />

        <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
            onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />

        <select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
            <option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
            <option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
        </select>
    </div>
    <div class="holdLiftMenu">
        <ul class="holdLiftMenuUL">
            <li class="holdLiftMenuLI">
                <a class="holdLiftMenuA total current">Total
                    <input type="hidden" name="hid4" id="hid4" value="4" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA squat">Squat
                    <input type="hidden" name="hid1" id="hid1" value="" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA benchpress">Benchpress
                    <input type="hidden" name="hid2" id="hid2" value="" />
               </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this.form)" class="holdLiftMenuA deadlift">Deadlift
                    <input type="hidden" name="hid3" id="hid3" value="" />
                </a>
            </li>
        </ul>
    </div>
</form>

Answer 1

这是因为在li这最后一个引用它自己的元素，而这最后一个没有form属性，结果是未定义的。

将所有onchange/onclick="mySubmit(this.form)替换为onchange/onclick="mySubmit(this);，并将mySubmit功能更改为：

function mySubmit(theForm) {
    theForm = $(theForm).closest("form");
    $.ajax({ // create an AJAX call...
        data: $(theForm).serialize(), // get the form data
        type: $(theForm).attr('method'), // GET or POST
        url: $(theForm).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#here').html(response); // update the DIV
        }
    });
}

以上示例代码段：

function mySubmit(theForm) {
        console.log($(theForm).closest("form").attr("action"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">

  <div class="holdLiftMenu">
        <ul class="holdLiftMenuUL">
            <li class="holdLiftMenuLI">
                <a class="holdLiftMenuA total current">Total
                    <input type="hidden" name="hid4" id="hid4" value="4" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA squat">Squat
                    <input type="hidden" name="hid1" id="hid1" value="" />
                </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA benchpress">Benchpress
                    <input type="hidden" name="hid2" id="hid2" value="" />
               </a>
            </li>
            <li class="holdLiftMenuLI">
                <a onclick="mySubmit(this)" class="holdLiftMenuA deadlift">Deadlift
                    <input type="hidden" name="hid3" id="hid3" value="" />
                </a>
            </li>
        </ul>
    </div>
</form>

AJAX帖子onclick

1 个答案: