AJax 变量未发送到 php 变量

Posted 2023-02-24

【中文标题】AJax 变量未发送到 php 变量

【英文标题】：AJax variable not getting send to php variable

【发布时间】：2015-09-30 13:35:35

【问题描述】：

我对 Ajax 和 Jquery 非常陌生，并且通过 SO 和在线教程学习，所以请记住我是新手，如果您阅读并愿意回答我的帖子。

我设法创建了以下表单，它是一个在提交时显示消息的表单。如果表单成功提交，则会显示一条消息而不刷新页面，如下图所示：

表格

        <form name="message-form" action="" id="contact-form" method"post">
        Message<br /> <input type="text" name="msg" value="" /><br />
        <input type="submit" value="Contact Us" name="contact" class="buttono" />
        </form>
        <div class="form-feedback" style="display:none">
        Thank You We will Get Back to you 
        </div>
         <div class="form-feedback" style="display:none">
        Ooops....Something Went Wrong
        </div>
       <div> 

JQUERY

  $(function()
        $("#contact-form").submit(function(e)
        e.preventDefault(); 

        $form = $(this);

        $.post(document.location.url, $(this).serialize(), function(data)
            $feedback = $("<div>").html(data).find(".form-feedback").hide();
            $form.prepend($feedback)[0].reset();
            $feedback.fadeIn(1500)
        )

        );
    )

我想做的事

从文本字段消息中检索值并将其分配给 php 变量

我的问题

当我尝试使用以下代码检索 message 的值时，没有任何反应：

表单下方的 PHP 代码

 <?php
     if(isset($_POST['contact']))
        $message = $_POST['msg'];
        echo $message; 
     
     ?>  

我对 Ajax 很陌生，所以我想我在这里做错了，不幸的是我不知道我哪里出错了，所以我希望有人能把我带到正确的道路上。

提前致谢

【问题讨论】：

最后一个代码是在同一页上吗？

在网络选项卡上的chrome dev工具中，当您单击时，您会看到该页面的帖子吗？

@Hanoncs 当我使用 firbug 时我可以看到文本框的值和 PHP $msg 变量，但它没有在页面上回显...？为什么

好的，所以你看到了 msg: 'whatever you enter'？那应该可以。你用的是什么IDE？

是的，这是正确的，我唯一的问题是当我执行echo $msg 时输入的值没有在页面上得到回显，但我可以在控制台中看到$msg 的值网络标签...

【参考方案1】：

Hanoncs 建议会起作用，但只保留浏览器端的内容（通过仅显示从表单到 div 的消息），将始终给用户留下消息是在服务器端发送（处理）的印象，而它并不总是情况下，可以让 php 在用 javascript 显示它之前返回它。所以这是我建议的另一种方法：

首先，关注点分离： 向同一当前页面发送 POST HTTP 请求在某种程度上与 AJAX 的目的相矛盾。 HTTP 响应将包含所有页面（PHP 渲染的 HTML，用于模板的嵌入 HTML，如果脚本未加入脚本标签，可能还有脚本）。相反，我建议您创建一个单独的小型 php 文件，该文件只负责渲染所需的标记。因此，不要使用$.post(document.location.url..，而是使用$.post('pathToSmallPHPFile'..

其次，让 jQuery AJAX 函数接受回调或使用 Promise。建议大家仔细阅读以下link.

【讨论】：

他没有说要保存到数据库中。

【参考方案2】：

问题是你使用的是ajax，它不会导致页面刷新，然后尝试回显发布的变量，由于没有页面刷新，php不会再次处理页面来回显发布的变量。

我的解决方案是使用 javascript 显示输入的文本，然后使用 php 将其数据库化。

这是一个例子，

$(document).ready(function () 
    $(".button").click(function () 
        $('p').text($('#msg').val());
    );
);

http://jsfiddle.net/r4nanmof/ 如果您只想在页面上显示它，则不需要 ajax。如果您打算保存在数据库中，则需要 ajax。

【讨论】：

不，伙计，但我需要避免页面刷新......所以我必须使用 AjAX，但必须有一些其他解决方案来解决这个 +1 问题

是的，你可以避免它。您可以使用 javascript 将 $msg 中的文本设置为

【参考方案3】：

将消息值发布到 php 文件的 Jquery 代码如下：

$('#contact_btn').click(function(event)
  event.preventDefault();
  var url = "url/of/the/php/page/where/to/process/data";
  var data = $("#msg_box").val();
  var wrapper = $('#wrapper');
  
  $.ajax(
    type: "POST",
    url: url,
    data: data,
    success: function(response)
      wrapper.html("The reponse from the page is " + response);
      ,
    error: function(xhr,status,msg)
      //Handle error here
      
  );
  
);

<code>
<div id="wrapper">
<form name="message-form" action="" id="contact-form" method"post">
Message<br /> <input type="text" name="msg" id="msg_box" value="" /><br />
<input type="submit" id="contact_btn" value="Contact Us" name="contact" class="buttono" />
</form>
<div class="form-feedback" style="display:none">
Thank You We will Get Back to you 
</div>
<div class="form-feedback" style="display:none">
Ooops....Something Went Wrong
</div>
</div>  
</code>

留言 谢谢我们会尽快回复您 哎呀....出了点问题

【参考方案4】：

在您的情况下没有必要，但将 method"post"> 更改为 method="post">

然后改变你的表格

<form name="message-form" action="" id="contact-form" method="""post">
      Message<br /> <input type="text" name="msg" value="" /><br />
    <input type="submit" value="Contact Us" name="contact" class="buttono" />
</form>
<div class="form-feedback" style="display:none">    </div>

并使用以下jQuery 代码post 您的数据

$(function () 
    $("#contact-form").submit(function (e) 
        e.preventDefault();
        $form = $(this);
        $.post(
                document.location.url,
                $(this).serialize(),
                function (data) 
                    $(".form-feedback").html("Your msge " + data + " is recieved and we will get back soon");
                    $(".form-feedback").show();
                )

    );
);