Question

我是Ajax和Jquery的新手，并通过SO和在线教程学习，所以请记住我是一个菜鸟你应该阅读并善于回答我的帖子。

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

enter image description here

FORM

        <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变量

我的问题

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

以下表单中的PHP代码

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

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

提前致谢

Answer 1

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

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

这是一个例子，

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

http://jsfiddle.net/r4nanmof/你不需要ajax，如果你想要做的就是在页面上显示它。如果您计划保存在数据库中，则需要ajax。

Answer 2

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

首先，做一个关注点分离：将POST HTTP请求发送到同一个当前页面，以某种方式说明AJAX的目的。 HTTP响应将包含所有页面（PHP的HTML rendred，用于模板的嵌入式HTML，以及脚本未加入脚本标记的脚本）。相反，我建议你创建一个小的单独的php文件，负责只渲染所需的标记。因此，不使用$.post(document.location.url..，而是使用$.post('pathToSmallPHPFile'..

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

Answer 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>

留言

谢谢你我们会回复你哎呀......有些东西错了

Answer 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();
                })

    });
});

AJax变量没有发送到php变量

4 个答案: