2

我正在使用以下代码发送电子邮件。如果我删除 e.preventDefault(); 它将不起作用。为什么我需要禁用表单的默认提交行为？如果没有 e.preventDefault(); 我怎么能实现它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#divLoading').hide();
            $('#appointment').submit(function (e) {
                e.preventDefault();



                var serviceURL = 'WebService.asmx/SendMail';
                var Name = $("#fname").val();
                var Email = $("#email").val();
                var Telephone = $("#phone").val();
                var Comment = $("#comment").val();

                if ($("#fname").val().length == 0) {
                    alert("Please Enter Name");
                    $("#fname").focus();
                    return false;
                }

                if ($("#email").val().length == 0) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }

                if (Email.indexOf("@") == -1) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }
                if (Email.indexOf(".") == -1) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }

                $('#divLoading').show();

                $.ajax({
                    type: "POST",
                    url: serviceURL,
                    data: '{"name":"' + Name + '","address":"' + Email + '","telephone":"' + Telephone + '","comment":"' + Comment + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: successFunc,
                    error: errorFunc
                });

                function successFunc(data, status) {

                    //  alert("Mail Sent!");
                    $('#divLoading').hide();
                    window.location = "contat-submit.php";

                }

                function errorFunc() {
                    // alert('error');
                }

            });

        });

</script>
</head>
<body>
   <form name="appointment" id="appointment" method="post" action="About.aspx">
    <div>
    </div><div id="leftcolumn4"><div class="h2">Contact Form</div>
      <form name="appointment" id="Form1" method="post" action="send_contact.php">
Full Name:
<br />
<label>
  <input name="fname" type="text" class="form-input" id="fname" size="30" />
</label> 
<br /><br />

Email Address:<br />
<label>
  <input name="email" type="text" class="form-input" id="email" size="30" />
</label><br /><br />
Telephone:
<br />
<label>
  <input name="phone" type="text" class="form-input" id="phone" size="30" />
</label> 
<br /><br />
Your Comment:<br />
<label>
<textarea name="comment" cols="28" rows="4" class="form-input-box" id="comment"></textarea><br />

      <br />
&nbsp;</label><input name="submit" type="submit" class="form-input-submit" value="Submit" id="btnMail"/>
    </div>
    </form>
</body>
</html>
4

4 回答 4

3

此代码依赖于禁用表单的默认提交行为，因为表单数据是使用 ajax 发送的（而不是 GET 或 POST 请求，这也会使浏览器导航到About.aspx）。

e.preventDefault();您可以通过 return来实现它false。
或者不使用 ajax，在这种情况下，您可以使用以下方式在服务器端获取 POST 数据：Page.Request.QueryString["htmlElementName"]

于 2013-04-30T06:21:56.110 回答
2

该event.preventDefault()方法阻止 an 的默认操作element发生。

而不是你可以使用return false。

例如，单击的锚点不会将浏览器带到新的 URL。我们可以使用 event.isDefaultPrevented() 来确定该方法是否已被由该事件触发的事件处理程序调用。

于 2013-04-30T06:12:42.073 回答
1

如果您不使用e.preventDefault()，表单提交的默认行为将触发。它会将浏览器发送到action表单的属性，并且浏览器会消失，您不想要它。

于 2013-04-30T06:17:52.377 回答
1

您正在使用 ajax，这意味着您根本不需要提交表单。如果您仍然希望页面在发送电子邮件后重定向到 about.aspx，请将您的成功函数更改为：

function successFunc(data, status) {
    $('#divLoading').hide();
    window.location = "about.aspx";
}

如果您允许表单的默认发布行为，表单将在您的 ajax 请求完成之前发布，并且会干扰您的电子邮件发送。

附带说明一下，您有 2 份带有姓名约会的表格，这可能会让您有些困惑。您的代码引用的是第一个，而不是第二个。

于 2013-04-30T06:31:52.367 回答