Question

我目前正在使用PHP，并且添加了一个表单，该表单应该获取表单信息并提交表单。

点击签出后，会弹出一个模式弹出窗口，要求用户进行注册，点击签约后，用户将使用登录帐户重定向到仪表板页面。

这是我的代码：

 <button type="submit" id="clientRegister1" class="btn btn-raised btn-block btn-primary">Sign Up</button>

我的Ajax代码

 // Condition for Client Register with ajax

 $('#clientRegister1').on('click', function(e) {
    var name = document.getElementById("clientname").value;
    var email = document.getElementById("clientEmail2").value;
    var contact = document.getElementById("clientcontact").value;
    var password = document.getElementById("clientpassword").value;
    var repassword = document.getElementById("clientConfirmPassword").value;
    var termsandconditions = document.getElementById("termsandconditions").value;

    if(name ==''){
        swal("Name not filled out", "", "warning");
        e.preventDefault();
    }else if(email ==''){
        swal("Email not filled out", "", "warning");
        e.preventDefault();
    }else if(contact ==''){
        swal("Contact not filled out", "", "warning");
        e.preventDefault();
    }else if(password == ''){
        swal("Password not filled out", "", "warning");
        e.preventDefault();
    }else if(repassword == ''){
        swal("Confirm Password not filled out", "", "warning");
        e.preventDefault();
    }else if(password != repassword) {
        e.preventDefault();
        swal("Password do not Match!", "", "warning");
    }else {

        $.ajax({
            type: "POST",
            url: "Client/createClient",
            data: {uname: name, uemail: email, ucontact: contact, upassword: password},
            cache: false,
            success:
            function (data) {
                // window.location.reload();
                document.getElementById("inputEmail").value = data;
                $('#formsubmit_order').submit();
            }
       });
    }
 });

代码完全可以正常工作，并提交所有数据并重定向到Google chrome中指定的页面，但在Firefox上不起作用。在单击提交页面时，页面仅在Firefox上刷新。

Answer 1

好吧，您在此处提交表单，以便在单击时将其发布。

<button type="submit" id="clientRegister1" class="btn btn-raised btn-block btn-primary">Sign Up</button>

使用ajax时，我想在输入类型按钮上使用return false指定方法名称，因此它永远不会在方法之后发布...所以...

修改为：

<input type="button" id="clientRegister1" onclick="register(event); return false;" class="btn btn-raised btn-block btn-primary">Sign Up</button>

和js ...

function register(e){
     var name = document.getElementById("clientname").value;
var email = document.getElementById("clientEmail2").value;
var contact = document.getElementById("clientcontact").value;
var password = document.getElementById("clientpassword").value;
var repassword = document.getElementById("clientConfirmPassword").value;
var termsandconditions = document.getElementById("termsandconditions").value;



if(name ==''){
    swal("Name not filled out", "", "warning");
    e.preventDefault();
}else if(email ==''){
    swal("Email not filled out", "", "warning");
    e.preventDefault();
}else if(contact ==''){
    swal("Contact not filled out", "", "warning");
    e.preventDefault();
}else if(password == ''){
    swal("Password not filled out", "", "warning");
    e.preventDefault();
}else if(repassword == ''){
    swal("Confirm Password not filled out", "", "warning");
    e.preventDefault();
}else if(password != repassword) {
    e.preventDefault();
    swal("Password do not Match!", "", "warning");
}else {

//  alert("working");
//  e.preventDefault();

    $.ajax({
        type: "POST",
        url: "Client/createClient",
        data: {uname: name, uemail: email, ucontact: contact, upassword: password},
        cache: false,
        success:
        function (data) {

                    // window.location.reload();
                    document.getElementById("inputEmail").value = data;
                    $('#formsubmit_order').submit();

                }

            });
}

});
}

Answer 2

安全问题，例如跨域，非安全ssl页面请求，通常是此问题的已知原因。当请求和响应头不匹配时会发生

他们要研究的3个主要领域

.htaccess
您正在从中调用页面的Ajax文件
PHP页面响应Ajax

让我们逐个查看这些文件，如果不存在，首先以.htaccess根目录添加这些行。您可以在此处进行更改，或在步骤3中进行更改

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Referrer-Policy "origin"
  </IfModule>

第二个Ajax功能

    $.ajax( {
      type: 'POST',
      url: yourForm.attr( 'action' ),
      data: yourForm.serializeArray(),
      dataType: 'json',
      contentType: 'application/x-www-form-urlencoded',
      async: true,
      crossDomain: false,
      headers: {
                  'accept': 'application/json; charset=UTF-8',
                  'Access-Control-Allow-Origin' : '*',
                  'Access-Control-Allow-Methods' : 'POST',
              },      
      xhrFields: { withCredentials: true },      
      success: function(data) {
            if (data.code == '200') {
            $('.bg-success').removeClass('hidden');    
            $('#message').html(data.message);    
            document.getElementById("yourForm").reset();
            }
      }
});

告诉浏览器页面的内容类型以及标题对象将接受的格式的数据。您还需要告诉浏览器访问控制allow方法和来源。在处理表单时，请使用内容类型为application/x-www-form-urlencoded

现在让我们看最后一步的PHP文件

         // Send Ajax Reply   
            $reply = [];
            $reply['code'] = 200;
            $reply['message'] = 'We have received your message.';

如果您已经添加了.htaccess，请跳过这两行

    header('Access-Control-Allow-Origin: *');
    header('Referrer-Policy: origin');

相同文件

    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 604800');
    header('Access-Control-Allow-Methods: POST');
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($reply);

Ajax表单提交可在Chrome上运行，但不能在Firefox上运行

2 个答案: