【问题标题】:jquery ajax post works fine in IE, FF, Chrome but not Safarijquery ajax post 在 IE、FF、Chrome 但不是 Safari 中运行良好
【发布时间】:2011-10-13 09:07:24
【问题描述】:

我通过 action 方法将表单发布到远程服务器,但在发布之前调用 jquery 函数来更新数据库 - 在 IE、FF 等中一切正常......但是,Safari 总是无法做到jquery 数据库在返回为真或异步时插入:真,...如果两者都是假的,(因此 html 表单由于错误声明而无法发布)它工作得很好吗?但是当为真时,表单只会POST,但jquery ajax post不会运行?

形式 ...

 <form action="http://anotherplace" method="post" id="myform" >

<button class="button-big" type="submit" id="myform-post" ><span>Continue</span></button>

函数...

   $(document).ready(function() { //available when doc renders


   $("form#myform").submit(function(){

    var title = $("select#title").val();
    if (title == "") {
    $("select#title").css({backgroundColor:"#ccc"});        
    $("select#title").focus();
     return false;
   }

     var firstname = $("input#fname").val();
    if (firstname == "") {
     $("input#fname").css({backgroundColor:"#ccc"});
     $("input#fname").focus();
     return false;    }

      var surname = $("input#sname").val();
    if (surname == "") {
     $("input#sname").css({backgroundColor:"#ccc"});
     $("input#sname").focus();
     return false;    }



//Grab the form values to pass via AJAX for DB insert

var cameraMake = $("input#cameraMake").val();
var cameraModel = $("input#cameraModel").val();
var cameraValue = $("input#cameraValue").val();
var mp3Make = $("input#mp3Make").val();
var mp3Model = $("input#mp3Model").val();
var mp3Value = $("input#mp3Value").val();


        var dataString='&title='+ title  + '&firstname=' + firstname + '&surname=' + surname + '&add1=' + add1 + '&add2=' + add2 + '&add3=' + add3 + '&pcode=' + pcode + '&email=' + email + '&phone=' + phone +'&username=' + username + '&pword=' + pword; 

var ajaxComplete = false;
if( !ajaxComplete ){
        $.ajax({
            async: true,              
            type: "POST",
            url: "process-.php",
            data: dataString,
            success: function() {
               // $('#details').html("<div id='post-message'></div>");
               // $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>")

                ajaxComplete = true;
                this.submit();

            }
        });
        return false; // Abort form submission by now
    }else{
        return true; // Submit normally
    }
});


}); //End of document.ready

脚本在基于提交 ID 的“点击”方法上运行(验证然后 AJAX 发布)。

如果在 Safari 中失败(所有版本都经过测试),任何人都可以提供任何建议,或者提供更好的解决方案来满足我的需求吗? - 与异步/发布有关?正如我所说,设置为 false 并且工作正常......但是,我仍然需要 HTML 表单来发布!

非常感谢!

【问题讨论】:

  • 旁注:它是 HTML 5 吗?在 HTML 4 中,ID 不能以数字开头。
  • 问题解决了......似乎只有成功函数中的 $("#myform-post").trigger("submit") 可以在 Safari 中使用

标签: php jquery safari


【解决方案1】:

如果我理解正确,您想在有待处理的 AJAX 请求时卸载页面。即使在看起来可以正常工作的浏览器中,它也几乎没有机会正常工作。

我的建议是最初中止表单的 POST 请求 (return false;) 并将代码添加到 success 处理程序以在 AJAX 请求完成时触发表单提交。您可以使用标志变量,以便 AJAX 请求仅在第一次触发。

更新:

一些快速、肮脏和未经测试的代码。我也意识到你省略了代码块的开头,所以我只是发明了它:

var ajaxComplete = false;
$("form#3-form").submit(function(){
    if( !ajaxComplete ){
        $.ajax({
            async: true,              
            type: "POST",
            url: "process-.php",
            data: dataString,
            success: function() {
                $('#details').html("<div id='post-message'></div>");
                $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>")

                ajaxComplete = true;
                this.submit();

            }
        });
        return false; // Abort form submission by now
    }else{
        return true; // Submit normally
    }
});

【讨论】:

  • 嗨,谢谢 - 我仍然对如何实现它有点困惑?你能举个例子吗?我真的很挣扎这个!谢谢
  • 嗨,谢谢 - 我已经用我的脚本的精简版本更新了最初的帖子 - 我已经添加了你的代码,但它在 Safari 中仍然失败?它既可以只发布 ajax POST 也可以发布 HTML 表单,而不是像 FF、IE 一样。希望我上面的代码更新可以帮助解决?谢谢
  • @Marc:显然,this.submit() 需要一个表单,而不是一个按钮。这个想法是您了解我们发布的代码并将其改编为您的脚本,而不是盲目地复制和粘贴然后回来乞讨。
  • 嗨,对不起 - 以上是一个错误..我会修改。我将它包装在一个 onsubmit 中,因此在 HTML 表单提交上调用该函数
【解决方案2】:

你应该使用

return false;

然后进行表单操作

window.location.url = "YOUR URL";

所以

$.ajax({
    async: true,              
    type: "POST",
    url: "process-.php",
    data: dataString,
    success: function() {
        $('#details').html("<div id='post-message'></div>");
        $('#post-message').html("<h2 style='color:#fff'>Thanks for getting in touch.</h2>");
        window.location.url = "YOUR URL";
    }
});
return false;

【讨论】:

  • 嗨,我已经尝试了上述方法(从 html 表单中删除了 action="" 帖子,因此操作为空白)...... ajax 帖子有效,但表单不会将 HTML 发布到window.location(远程服务器) - 它在循环中保留在表单页面上?
  • @Marc 不要更改您的表单操作。只需用你的替换我的代码。并在 window.location.url 中提供您的表单操作 url
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-12-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多