jquery，AJAX 表单提交不起作用。页面崩溃答案

【问题标题】：jquery, AJAX form submit not working. Page crashesjquery，AJAX 表单提交不起作用。页面崩溃
【发布时间】：2012-03-16 17:41:31
【问题描述】：

我正在尝试在不重新加载页面的情况下获取提交表单。

这是脚本：

$(function() {
    $("#submit").click(function() {
        var email = document.getElementById('emailaddress');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email.value)) {
            $('#invalidmail').show();
            var t=setTimeout(function(){$('#invalidmail').fadeOut("slow");},2000);
            email.focus;
            return false;
        } else {    
            $.ajax({
                type: "POST",
                url: "traces_form_handler.cgi",
                data: email,
                success: function(){
                    alert("success!");
                }
            });
            alert("success!");
            return false;
        };

      });  
});
</script>

这是html

<form name="form" method="post">
    Email: <input type="text" name="email" id="emailaddress" />
    <input type="submit" value="Submit" id="submit"/>
    </form>        
   <p id="invalidmail">Ops! The address you provided is not valid. Please retry.</p>

它在无效邮件部分有效，但如果我提交一个有效的电子邮件地址，浏览器就会崩溃。

有什么建议吗？

谢谢

【问题讨论】：

您需要阻止表单上的默认提交操作。您正在发送 AJAX 请求并同时提交表单。
你也试过什么浏览器？
@Diodeus 不是“返回假”；做？ Lix 铬！
我会做一些试验：而不是 alert("success!"); 去 console.log("success") 看看会发生什么像 firebug 或 chorme web 开发工具这样的调试器。
@DanieleB，在到达那里之前它崩溃了。

标签： jquery ajax forms

【解决方案1】：

我不知道这是否会使浏览器崩溃。但是您将 dom 元素作为数据发送到 ajax 请求，我猜您只想发送它的值。

        $.ajax({
            type: "POST",
            url: "traces_form_handler.cgi",
            data: { email: email.value },//Check here in your code
            success: function(){
                alert("success!");
            }
        });

【讨论】：

【解决方案2】：

这个属性导致问题

url: "traces_form_handler.cgi",

我已在浏览器 FF 10.0.2 上对其进行了测试

On Error 控制台错误是：错误：未捕获的异常：[异常...“无法转换 JavaScript 参数”nsresult：“0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) :: line 7601”数据：否]

Solution: url:"some_valid_url_.php"

【讨论】：

我不能将它发送到 python 脚本吗？

【解决方案3】：

你可以使用表单提交事件，这样更好

HTML

<form id="myForm" name="form" method="post">
  Email: <input type="text" name="email" id="emailaddress" />
  <input type="submit" value="Submit" id="submit"/>
</form> 
<p id="invalidmail">Ops! The address you provided is not valid. Please retry.</p>

$(function() {
$("#myForm").on('submit', function(e){
e.preventDefault();
var email=$("#emailaddress");
var filter = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    if (!filter.test(email.value)) {
        $('#invalidmail').show();
        var t=setTimeout(function(){
            $('#invalidmail').fadeOut("slow");},2000);
        email.focus;
        return false;
    }
    else 
    {    
        $.ajax({
            type: "POST",
            url: "my_server-page.php",
            data: email.val(),
            success: function(data){
                alert("success!");
            }
        });
    }

});
});

【讨论】：