jquery ajax 在使用 $.post 时仍然在 url 栏中发送 url答案

【问题标题】：jquery ajax still sending url in url bar while using $.postjquery ajax 在使用 $.post 时仍然在 url 栏中发送 url
【发布时间】：2018-10-27 14:16:34
【问题描述】：

我正在尝试使用 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，但是当我使用浏览器检查代码时，我看到请求方法：GET。并且没有加载php文件。

帮帮我。

【问题讨论】：

你能不能把edit 中的<form> 变成问题？我怀疑错误是您编写的 JS 未连接到您认为的表单
@HPierce 完成了。不知道问题出在哪里

标签： php jquery ajax

【解决方案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
});

【讨论】：

【解决方案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() 步骤为您提供了足够的工具来继续调试。

祝你好运！

【讨论】：

谢谢它的工作。这是我忘记的 .val()

【解决方案3】：

低代表添加为评论。

查看您的 .htaccess 文件。（没有设置 php 的东西来检查它并指出你现在要看的地方）。我记得可能发生的一些问题是 .htaccess 文件可以覆盖您的 url 并删除 .php 扩展名 - 因此您可以尝试搜索文件并更改它，或者只是尝试将您的 url 更改为 $.post("submit_message",.... 另一种情况是斜杠/ 会出现在导致问题的url 中。基本上问题在于某些设置会导致您的请求被重定向到 GET。

【讨论】：