Ajax 表单提交适用于 Chrome，但不适用于 Firefox

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

代码运行良好，提交所有数据并重定向到谷歌浏览器中指定的页面，但不适用于 Firefox。点击提交页面只会在 Firefox 上刷新。

Answer 1

安全问题，例如跨域、非安全 ssl 页面请求，通常会导致此问题。当请求和响应头不匹配时会发生这种情况

它们是需要研究的 3 个主要领域

1. .htaccess
2. 您调用页面的 Ajax 文件
3. 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();
            }
      }
});

告诉浏览器你页面的内容类型以及你将在标题对象中接受什么格式的数据。您还需要告诉浏览器访问控制允许方法和来源。当您处理表单时，使用内容类型为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);

Answer 2

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

<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();

                }

            });
}

});
}