javascript - AJAX 发布 onclick

Question

我试图弄清楚为什么当我用ajax代码发布时会得到这样的结果。

如您所见，在我表单中的大多数内容上，我使用 onchange="mySubmit(this.form)"或onclick="mySubmit(this.form)"使用ajax提交我的表单，所以这适用于输入元素，它返回所有正确的div和内容到我的div中，该div应该显示返回的所有数据。

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

HTML代码:

        <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>

JS Ajax 代码:

function mySubmit(theForm) {
    $.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
        }
    });
}

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>