Question

在我的jQM项目中，我遇到了表单提交问题。我没有使用＆＃34;动作＆＃34;提交表单的URL，相反，我使用JS在另一个js插件验证后提交我的表单，一旦验证，表单将由jQM $ .post（）提交。

我从jQM页面跟随此：

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

一切正常包括返回数据。但我的问题是，＆＃34;行动＆＃34;在表单中，如果我删除它，在表单提交后，应用程序将重定向到jQM第一页。同样是＃34;＃＆＃34;。如果我把＆＃34; /＆＃34;，它会显示＆＃34;错误加载页面＆＃34;一会儿就消失了。

我的问题是，有没有办法摆脱错误加载页面＆＃34;？我也尝试在表单标记中包含[data-ajax =＆＃34; false＆＃34;]。同样的结果。

请指教，谢谢。

enter image description here

我的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 =＆＃34; url＆＃34;在您提交时执行您的表单.. 试试这个

代码：

$("#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() );  
  }
  });

Answer 2

除了＆＃34; elseif＆＃34;。

之外，代码没有任何问题

正确的用法应该是＆＃34;否则如果＆＃34;。通过使用＆＃34; e.preventDefault（）;＆＃34;，在纠正上述错误后，一切都按预期工作。

通过JS的jQM POST表单显示“错误加载页面”

2 个答案: