发送带有PHP的Ajax回显数据的表单数据不显示

debugcn 发表于 Dev

蒂莫西·库切（Timothy Coetzee）

我正在学习Ajax ...通常我不喜欢发布我不太了解的主题，但是我相信Im在这里正确的道路上（也许不是...？），所以我将有机会让发现。

香港专业教育学院有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;

}

德格伦德尔

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

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

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

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

在您的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”

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。