将值附加到 URL 的表单

Posted 2023-05-09

【中文标题】将值附加到 URL 的表单

【英文标题】：Form appending values to URL

【发布时间】：2016-07-13 06:08:46

【问题描述】：

我有一个由 JQuery 提交的表单。有时当表单提交失败时，表单内的值会自动作为查询字符串附加到 url。我进行了很多搜索，但无法找到有关这种奇怪行为的任何信息。这是发生的事情的一个例子。

有一个包含两个字段的表单

$("#MyForm").validate(
        rules: 
            "UserName": 
                required: true
            ,
            "Password": 
                required: true,
                minlength: 8
            
        ,
        messages: 
            "UserName": 
                required: "UserName is required"
            ,
            "Password": 
                required: "Password is required"
            
        ,


        submitHandler: function () 
         var userName = $("#UserName").val();
         var password = $("#Password").val();
         var myObject = UserName:userName, Password: password  
          $.post('/MyAuthenticationUrl',myObject,function()
            //Redirect to Home page on success
          );
        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="/MyUrl"/>
  <input type="text" id="UserName" />
  <input type="password" id="Password"/>
  <input type="submit" id="Submit"/>
<form>

对于表单验证和提交，我使用来自JqueryValidation.org 的 JqueryValidation 插件

有时当我点击提交时，用户名和密码会附加到查询字符串中。

所以如果你有一个像http://localhost/Home/Index 这样的网址，它就会变成 http://localhost/Home/Index/?UserName=blah&Password=blah

我怀疑它与 JqueryValidation 插件有关，但我无法在问题页面 here 中找到任何相关内容

【问题讨论】：

尝试将method="post" 添加到您的表单标签中。

你应该在控制台失败时检查它，我想你应该在那里得到错误消息

@GentlemanMax 但是如果我是正确的，插件会阻止表单提交的默认行为，使用 ajax 方法

@A.Wolff，是的。但是当插件失败时，表单会正常提交。插件失败的原因可能是一个单独的问题。

@GentlemanMax 如果插件失败意味着 OP 的代码中有任何错误，那么是的。我认为 OP 应该问一下他的插件为什么会失败

【参考方案1】：

您显然没有正确包含和初始化 jQuery Validate 插件（不在您的 OP 中），因此您只需将表单提交到 action 属性中的 URL。

报告的问题描述了在form 标记中没有method="post" 属性时（非ajax）表单提交的默认行为...默认情况下，查询字符串会附加到URL。

这与 jQuery Validate 插件无关。

---

就目前而言...

submitHandler: function () 
    var userName = $("#UserName").val();
    var password = $("#Password").val();
    var myObject = UserName:userName, Password: password  
    $.post('/MyAuthenticationUrl',myObject,function()
        //Redirect to Home page on success
    );

submitHandler 没有发挥作用，因为插件已损坏（不包括在内，javascript 错误等）。但是，您的意图似乎是使用 ajax .post() 提交表单和 "Redirect to Home page on success"。我不明白这一点。如果您想重定向到另一个 URL，那么您不需要 ajax... 只需使用 action 属性的 URL，表单将自动提交并重定向到该 URL。完全删除submitHandler 将恢复到此默认行为。

您的标记...

<input type="text" id="UserName" />
<input type="password" id="Password"/>

要使用 jQuery Validate 插件，您必须在任何考虑验证的字段上都有一个name 属性。

<input type="text" name="UserName" id="UserName" />
<input type="password" name="Password" id="Password"/>

对此没有例外或解决方法；这就是插件在内部跟踪各种元素的方式。

---

最后，您的问题已用asp.net 和asp.net-mvc 标记。在 ASP 中，jQuery Validate 插件由包含的 Unobtrusive Validation 插件自动初始化。如果是这种情况，那么您不能直接调用 .validate() 方法，因为 Unobtrusive Validation 插件会根据 html 标记中的数据属性自动构造和调用 .validate()。 jQuery Validate 插件将只使用.validate() 的第一个实例，并完全忽略任何后续调用。

删除您对.validate() 的呼叫以验证这一点。如果没有任何变化，那么您就会知道它被 ASP 的内置 Unobtrusive Validation 覆盖，或者它一开始就被完全破坏了。