javascript - jQM POST 表单通过 JS 显示 "Error Loading Page"

Question

在我的 jQM 项目中，我遇到了表单提交问题。我没有使用“action”URL来提交表单，而是使用JS在另一个js插件验证后提交表单，一旦验证，表单将由jQM $.post()提交。

我从 jQM 页面关注此内容:

Example: Send form data using ajax requests
$.post( "test.php", $( "#testform" ).serialize() );

一切正常，包括返回数据。但我的问题是，表单中的“操作”，如果我删除它，在表单提交后，应用程序将重定向到 jQM 第一页。 “#”也是如此。如果我输入“/”，它会显示“错误加载页面”一会儿然后消失。

我的问题，有什么办法可以摆脱“加载页面时出错”的情况吗？我也尝试过在表单标签中包含 [data-ajax="false"] 。也是同样的结果。

请多多指教，谢谢。

我的 JS 代码:使用此代码可以解决问题。但是，如果我取消注释行来执行我的实际任务，它会将我重定向到多页的第一页。就像忽略了 PreventDefault 一样。这里到底出了什么问题？请指教，谢谢。

$(document).on("click", "#registerButton", function (e) {
    e.preventDefault();
    var registerForm = $( "#registerForm" );
    if (registerForm.valid() === true) {
        document.getElementById("regDeviceName").value = intel.xdk.device.model;
        document.getElementById("regDeviceOs").value = intel.xdk.device.platform;
        $.post("http://domain.com/api/user/register",
        $("#registerForm").serialize(),
            function(data,status){
                alert(data);
//                if (data == "registered") {
//                    $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                }
//                elseif (data == "unverified") {
//                    $.mobile.pageContainer.pagecontainer("change", "#unverified");
//                }
//                elseif (data === "duplicate") {
//                    $.mobile.pageContainer.pagecontainer("change", "#duplicate");
//                }
//                else {
//                    $.mobile.pageContainer.pagecontainer("change", "#suspended");
//                };
//                $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
            });
        }
});

第二次尝试时的 JS 代码:

$("#registerButton").click(function (e) {
    e.preventDefault();
    var registerForm = $( "#registerForm" );
    if (registerForm.valid() === true) {
        document.getElementById("regDeviceName").value = intel.xdk.device.model;
        document.getElementById("regDeviceOs").value = intel.xdk.device.platform;
        $.post("http://domain.com/api/user/register",
        $("#registerForm").serialize(),
            function(data,status){
                alert(data);
//                if (data == "registered") {
//                    $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                }
//                elseif (data == "unverified") {
//                    $.mobile.pageContainer.pagecontainer("change", "#unverified");
//                }
//                elseif (data === "duplicate") {
//                    $.mobile.pageContainer.pagecontainer("change", "#duplicate");
//                }
//                else {
//                    $.mobile.pageContainer.pagecontainer("change", "#suspended");
//                };
//                $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                $("#registerResult").html("Data: " + data + "<br>Status: " + status);
            });
        }
});

表单 HTML(jQM 多页结构):

    <div data-role="page" id="register">
         <div data-role="header"><h1>Register</h1></div>
         <div data-role="content" class="pageWithHeader">
            <div id="formContainer">
                <form id="registerForm">
                <label for="regFirstName">First Name</label>
                <input class="registerVal" type="text" name="regFirstName" id="regFirstName" value="">
                <label for="regLastName">Last Name</label>
                <input class="registerVal" type="text" name="regLastName" id="regLastName" value="">
                <label for="regEmail">Email</label>
                <input class="registerVal" type="email" name="regEmail" id="regEmail" value="">
                <label for="regPassword">Password</label>
                <div id="regPassDiv">
                    <input class="registerVal" type="password" name="regPassword" id="regPassword" value="">
                </div>
                <input type="hidden" id="regDeviceName" name="regDeviceName" value="">
                <input type="hidden" id="regDeviceOs" name="regDeviceOs" value="">
                <div data-role="controlgroup" data-type="vertical">
                    <button id="registerButton" class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-left">Register</button>
                    <a href="#verifyRegister" class="ui-btn ui-corner-all ui-icon-check-square-o ui-btn-icon-left">Go to Account Verification</a>
                </div>
                </form>
             </div>
<!--             <div id="registerResult"></div>-->
         </div>
    </div> 

Answer 1

解决方案: 防止表单标记的默认操作，因为表单中的 action="url"在您提交时执行。试试这个

代码:

$("#formid").submit(function(e){
     $.post( "test.php", $( "#testform" ).serialize() );  

});

如果您使用 jquery 验证器，只需将此代码放入 successHandler 函数中即可。这里不需要阻止表单标签上的默认操作。

代码:

 $('#myform').validate({
  rules:{
  firstname:"required",
  lastname:"required",
  username:"required" ,
  employeeid:"required",
  email:{
  required:true,
  email:true
  },
  password:{
  required:true,
  minlength:5
  },
  phoneno:{
  minlength:9,
  maxlength:10,

  }
  },
  messages:{
  username:"Please enter your username..!",
  password:"Please enter your password..!"
  },

  submitHandler: function(form) {
              $.post( "test.php", $( "#testform" ).serialize() );  
  }
  });