Question

我正在尝试使用Ajax通过php发送消息。但是我仍然在URL栏中收到GET请求，而不是POST。该网址始终显示在地址栏中。

这是我的表单，jquery和php代码

html形式：

                <form class="form-horizontal contactez">
                    <!-- Form Name -->
                    <legend>Laissez-nous un message</legend>

                    <!-- Text input-->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="nom_m"></label>  
                      <div class="col-md-4">
                      <input id="nom_m" name="nom_m" type="text" placeholder="Nom" class="form-control input-md" class="nom_m">

                      </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="email_m"></label>  
                      <div class="col-md-4">
                      <input id="email_m" name="email_m" type="text" placeholder="Email" class="form-control input-md" class="email_m">

                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-md-4 control-label" for="objet"></label>  
                      <div class="col-md-4">
                      <input id="objet" name="objet" type="text" placeholder="Sujet" class="form-control input-md" class="objet">

                      </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="message"></label>
                      <div class="col-md-4">                     
                        <textarea class="form-control" id="message" name="message" class="message">Message</textarea>
                      </div>
                    </div>


                    <div class="modal-footer d-flex justify-content-center">
                        <button class="btn btn-indigo submitBtn" type="submit"> Message <i class="fa fa-paper-plane-o ml-1"></i></button>
                    </div>

                </form>

jquery代码： $（document）.ready（function（）{

    $('.contactez').submit(function(){

        var nom_m = $('#nom_m').val();
        var email_m = $('#email_m').val();
        var message_m = $('#message').val();
        var objet_m = $('#objet');
        var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

        if(nom_m.trim()==''){

            $('#nom_m').focus() ;
            return false ;

        } 
        else if(email_m.trim()=='')
        {
            $('#email_m').focus() ;
            return false ;
        }
        else if(objet_m.trim()=='')
        {
            $('#objet').focus() ;
            return false ;
        }
        else if(message_m.trim()=='')
        {
            $('#message').focus() ;
            return false ;
        }
        else if(email_m.trim()!='' && !reg.test(email_m))
        {
            bootbox.alert('Entrer une adresse mail valide');
            $('#email_m').focus();
            return false;
        }
        else
        {

            $.post("submit_message.php",{nom:nom_m,email:email_m,objet:objet_m,message:message_m},function(data){
                bootbox.alert('Message envoyé');

            }); 
        }
        return false ;
    });

});

php代码：

<?php 
    require "install.php" ;

    $nom = htmlspecialchars($_POST['nom']) ;
    $email = htmlspecialchars($_POST['email']) ;
    $objet = htmlspecialchars($_POST['objet']);
    $message = htmlspecialchars($_POST['message']);

    if(isset($connection) && !empty($nom) && !empty($email) && !empty($message)){

        $to = "name@gmail.com";
        //$subject = $objet ;
        $headers = "From : ". $email ."\r\n";
        $headers .= 'Content-Type: text/HTML; charset=utf-8' . "\r\n";
        $headers .= 'Content-Transfer-Encoding: 8bit'. "\n\r\n";

        mail($to,$objet,$message,$headers); 
    }

 ?>

我使用$ .post，但是当我用浏览器检查代码时，我看到了Request Method：GET。并且未加载php文件。

救救我。

Answer 1

您的处理程序未返回false，因为您在其中一项作业中出错：

var objet_m = $('#objet');

然后行else if(objet_m.trim()=='')导致以下错误：

TypeError: objet_m.trim is not a function

如果要确保未提交表单，请使用preventDefault()，这还使您能够从函数中删除所有return false。

$('.contactez').submit(function(evt) {
  evt.preventDefault();
  var nom_m = $('#nom_m').val();
  var email_m = $('#email_m').val();
  var message_m = $('#message').val();
  var objet_m = $('#objet').val();
  var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
  // Rest of the function ommited
});

Answer 2

这是我调试此步骤的步骤：

首先，明确阻止表单提交的默认事件处理程序。这样做是为了希望捕获在函数到达return false;之前出现的所有错误。

$('.contactez').submit(function(e){
    e.preventDefault();
    // ... 
}

现在，当您运行代码时，会出现此错误

您的脚本在有机会return false并阻止表单提交之前崩溃了，因此，当您通过重定向提交表单时，浏览器正在使用默认行为（这是您说的内容）地址栏正在更改。）

您可能只需要将.val()添加到此行var objet_m = $('#objet')。

$('.contactez').submit(function(e){

    e.preventDefault();

    var nom_m = $('#nom_m').val();
    var email_m = $('#email_m').val();
    var message_m = $('#message').val();
    var objet_m = $('#objet').val();
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

    // ...
}

我在与bootbox相关的页面上收到另一个错误，但我怀疑这只是您在这里没有讨论的依赖项。希望e.preventDefault()步骤能为您提供足够的工具以继续进行调试。

祝你好运！

Answer 3

要添加为注释的低代表。

查看您的.htaccess文件。（没有设置php的东西来检查它，并指出当前的位置）。我记得可能会发生的一些问题是.htaccess文件会覆盖您的网址并删除.php扩展名-因此您可以尝试搜索文件并进行更改，也可以尝试将网址更改为$.post("submit_message",.... 另一种情况是URL中会出现斜杠/，从而引起问题。基本上，问题围绕着某些设置导致您的请求被重定向到GET。

jQuery ajax在使用$ .post的同时仍在URL栏中发送URL

3 个答案: