使用ajax echo数据发送表单数据，不显示php

Question

我正在学习Ajax ...通常我不喜欢发布一个我知之甚少的主题，但我相信我在这里正确的道路上（也许不是......？）所以我将抓住机会找出答案。

我有3个选择框，每个框根据之前框的选择填充值：

一切正常，当用户点击提交时我想将3个文本框值发送到3个php变量并在同一页面上回显...

现在我的数据没有回显（变量数据没有显示）但是当我在firefox上查看我的控制台时，我可以看到变量的值......

以下是在选择框上进行的选择

以下是我在控制台中看到的内容

然而它在页面上没有回应......？

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#resultForm input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

PHP下面的表格

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
   $sport = $_POST['sport'];
   $round = $_POST['round'];
   $tournament=$_POST['tournament'];

   echo $sport;
   echo $round;
   echo $tournament;

}

Answer 1

我的代码中没有看到任何会使值显示在页面上的内容。您需要在AJAX成功函数中执行一些DOM插入，或者执行整页刷新并通过PHP回显数据（但这可能会破坏首先进行AJAX调用的目的。）

如果您想要使用AJAX路线，我建议您将PHP编辑为以下内容：

echo json_encode(array(
    'sport' => $sport,
    'round' => $round,
    'tournament' => $tournament
));

这将为您的jQuery AJAX调用返回一个JSON对象。

在jQuery成功函数中，使用这些值执行某些操作，如下所示：

jQuery.ajax({
    type: "POST",
    url: form.attr("action"), 
    data: formdata, 
    dataType: 'json',
    success: function(data) {
        $('<div></div>').text(data.sport).appendTo('body');
        $('<div></div>').text(data.round).appendTo('body');
        $('<div></div>').text(data.tournament).appendTo('body');
    }
});

请注意dataType的附加$.ajax参数。要以正确方式执行此操作，您还需要在PHP响应中将标题设置为“application / json”

Answer 2

你ajax只是在控制台中显示输出。更改ajax成功以在页面中显示它。 成功后进行更改：

success:function(data){
$('someelementclassorid').text(data);
}