Javascript jQuery.submit（）.ajax（）必须单击两次发送按钮才能获得正确的响应

我有一个包含5个字段的表单，我正在使用AJAX将其发送到一个PHP脚本，该脚本执行一些简单的验证并返回一个字符串

我为实际提交制作了一个jQuery脚本，当我尝试发送表单时，我必须单击两次发送按钮

更新：实时站点的Url:

以下是一些代码：

HTML

<form id="contact_form" class="form-horizontal" action"includes/contact.php" method"post">
            <div class="control-group">
                <label class="control-label" for="contact_name">Ditt navn og evt. bedrift</label>
                <div class="controls">
                    <input type="text" class="input-large" id="contact_name" name="contact_name" placeholder="Ditt navn og evt. bedrift" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_email">E-post</label>
                <div class="controls">
                    <input type="email" class="input-large" id="contact_email" name="contact_email" placeholder="E-post" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_tel">Telefon</label>
                <div class="controls">
                    <input type="tel" class="input-large" id="tel" name="contact_tel" placeholder="Telefon" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_subject">Emne</label>
                <div class="controls">
                    <input type="text" class="input-large" id="subject" name="contact_subject" placeholder="Emne for melding" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_desc">Din beskjed</label>
                <div class="controls">
                    <textarea rows="10" class="input-large" id="contact_desc" name="contact_desc" placeholder="Din beskjed"></textarea>
                </div>
            </div>
            <div class="text-error pull-right" id="error_message"></div><br>
            <input class="btn btn-large pull-right" type="submit" name="" value="Send" /><br>
</form>

PHP

$contact_name = $_POST['contact_name'];
$contact_email = $_POST['contact_email'];
$contact_tel = $_POST['contact_tel'];
$contact_subject = $_POST['contact_subject'];
$contact_desc = $_POST['contact_desc'];

if ($contact_name == '' || $contact_email == '' || $contact_tel == '' || $contact_subject == '' || $contact_desc == '') {
    echo "empty";
    die();
}
echo $contact_name.'<br><br>';
echo $contact_email.'<br><br>';
echo $contact_tel.'<br><br>';
echo $contact_subject.'<br><br>';
echo $contact_desc.'<br><br>';

$contact\u name=$\u POST['contact\u name']；
$contact\u email=$\u POST['contact\u email']；
$contact_tel=$_POST['contact_tel']；
$contact\u subject=$\u POST['contact\u subject']；
$contact_desc=$_POST['contact_desc']；
如果（$contact|u name=''contact|u email=''contact|u tel=''contact|u subject=''contact|u desc=''）{
回声“空”；
模具（）；
}
回显$contact_name.“

”；
回显$contact_电子邮件。“

”；
echo$contact_tel.“

”；
回显$contact_主题。“

”；
echo$contact_desc.“

”；

我不知道为什么我必须点击按钮两次，我已经尝试了一些尝试和错误，阅读论坛的答案。我试图将表单序列化到submit函数之外，但我无法让它按照我想要的方式运行。非常感谢您的帮助

---

哦，值得一提。实际的响应是，我第一次单击时，字段是空的（php验证），但第二次它正常工作。

我不确定这是否会产生影响，但您是否尝试过将以后希望发生的事情放入成功回调中

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
        e.preventDefault();
    });
});

---

我不确定这是否有什么不同，但你有没有尝试过把你想发生的事情放在成功的回调中

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
        e.preventDefault();
    });
});

---

我猜这是因为默认操作（提交表单）是在$.ajax请求之前处理的。尝试在提交回调中首先使用e.preventDefault（）

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        e.preventDefault();
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
    });
});

---

我猜这是因为默认操作（提交表单）是在$.ajax请求之前处理的。尝试在提交回调中首先使用e.preventDefault（）

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        e.preventDefault();
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
    });
});

---

使用常规的输入按钮而不是提交按钮进行ajax调用

---

$（“#按钮”）。单击（函数（）{…ajax…}

使用常规输入按钮而不是提交按钮进行ajax调用

---

$（“#按钮”）。单击（函数（）{…ajax…}

之所以会发生这种情况，是因为您正在阻止默认行为，而默认行为主要是提交！表单属性（

方法

和

操作

）缺少一些

=

）嗨，加比，我有方法和动作集？@Dan LeviTømtaHansen，我是说在你发布的html中…（我认为这与你的问题无关..这只是一个观察。

action“includes/contact.php”

应该是

action=“includes/contact.php”

，而

方法也应该是这样的。）@GabyakaG.Petrioli感谢您指出这一点，我没有看到这一点！：）发生这种情况是因为您正在阻止默认行为，而默认行为主要是提交！您缺少表单属性的一些
=
（
method
和
action
）嗨，加比，我有方法和动作集？@Dan LeviTømtaHansen，我是说在你发布的html中…（我认为这与你的问题无关..这只是一个观察。
action“includes/contact.php”
应该是
action=“includes/contact.php”
，而
方法也应该是这样的。）@谢谢你指出这一点，我没有看到那一个！：）嗨，乔纳森，它的行为完全一样，但是谢谢，我对此感到非常困惑。我想阻止默认操作并通过Ajax发送表单，并进行一些验证，但我仍然需要单击实际的提交按钮两次。我得摆弄一些。哦，值得一提。实际的反应是，我第一次单击时字段是空的，但第二次它按它应该的方式工作时，它的行为是一样的，但谢谢，我对此感到非常困惑。我想阻止默认操作并通过Ajax发送表单，并进行一些验证，但我仍然需要单击实际的提交按钮两次。我得摆弄一些。哦，值得一提。实际的反应是，我第一次单击时字段是空的，但第二次它正常工作时，我没有发现这一点，我猜这是与另一个javascript的某种冲突，因此我根据您的建议采取了另一种方法，将其设置为按钮并使用单击功能。案件结案。谢谢，伙计，没问题。如果您接受带有复选标记的答案，它将向具有类似问题的其他用户表明这就是解决方案。$（“#按钮”）。单击（函数（）{…ajax…}）；我没有发现这一点，我猜这是与另一个javascript的某种冲突，因此我根据您的建议采取了另一种方法，将其设置为按钮并使用单击功能。案件结案。谢谢，伙计，没问题。如果您接受带有复选标记的答案，它将向具有类似问题的其他用户表明这就是解决方案。$（“#按钮”）。单击（函数（）{…ajax…}）；