0

我有一个基本表单，我在其中提交 facebook 朋友的 ID，php 返回我的名字、我的 FB 照片、我朋友的名字和我朋友的 fb 照片。这是我的相关代码

HTML

<form name="input">
<input type="text" name="name" id="name"/>
<input id="submit" type="submit" class="btn btn-info" value="Submit"/>
</form>

<div class="row" id="graphArea"></div>

JAVASCRIPT

$('#submit').click(function(e){
    e.preventDefault();
    var formData = $('form').serialize();
    submitForm(formData);
});

function submitForm(formData){
$.ajax({    
    type: 'POST',
    url: 'graph.php',        
    data: formData,
    dataType: 'json',
    cache: false,
    timeout: 7000,
    success: function(data) { 
        $("#graphArea").load("graph.php");
        $(window).scrollTop($("#graphArea").offset().top);
        $("#graphArea").fadeIn(500);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("There was an error");          
    },              
    complete: function(XMLHttpRequest, status) {            

        $('form')[0].reset();
    }
});

图.php

<?php
    require 'resources/plugin/facebook-php-sdk/src/facebook.php';
    //..some facebook authentication stuff
    $friend = $_POST['name'];
    $basicInfo = $fb->api('me?fields=friends.uid(' . $friend . ').fields(first_name,name),first_name,name');
 ?>
<hr>
<br />
<div class="span2 offset2"><h3>
<?php
    echo $basicInfo['name'] . "</h3></div><div class=\"span2\">";
    echo "<img src='https://graph.facebook.com/" . $user . "/picture?type=large'>";
    echo "</div><div class=\"span2\">";
    echo "<img src='https://graph.facebook.com/" . $friend . "/picture?type=large'></div>";
    echo "<div class=\"span2\"><h3>" . $basicInfo['friends']['data'][0]['name'];
?>
</h3>
</div>

每次我提交表单时，我都会收到错误部分，它会提示“出现错误”。但是通过 Google Chrome Javascript 控制台查看并单击网络，然后单击预览，我看到了我想要的结果！这是我第一次处理 PHP 和 AJAX，我会很感激我能得到的所有帮助。谢谢！

4

2 回答 2

2

在您给出的 javascript ajax 调用中dataType: 'json',，php您返回的htmlthis 将引发错误。如果您希望响应为 html 格式，请将数据类型更改为html.

于 2013-01-22T04:34:53.770 回答
1

graph.php您对includes的 ajax 调用dataType: 'json'，但graph.php似乎输出了一个 HTML 片段。此外，您的 AJAX 成功处理程序会再次调用graph.php-- 这是不必要的，因为您刚刚调用了graph.php提交表单。你应该取而代之的是把返回的 HTML 注入到 DOM 中：

$.ajax({    
    type: 'POST',
    url: 'graph.php',        
    data: formData,
    // REMOVED dataType
    cache: false,
    timeout: 7000,
    success: function(data) { 
        $("#graphArea").html(data);   // CHANGED
        $(window).scrollTop($("#graphArea").offset().top);
        $("#graphArea").fadeIn(500);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("There was an error");          
    },              
    complete: function(XMLHttpRequest, status) {            

        $('form')[0].reset();
    }
});
于 2013-01-22T04:34:22.543 回答